fix optimistic follow button (#91)

Fixes #85

routes/_actions/accounts.js

@@ -39,11 +39,14 @@ async function updateRelationship (accountId, instanceName, accessToken) {
   }
 }
 
-export async function updateProfileAndRelationship (accountId) {
+export async function clearProfileAndRelationship () {
   store.set({
     currentAccountProfile: null,
     currentAccountRelationship: null
   })
+}
+
+export async function updateProfileAndRelationship (accountId) {
   let instanceName = store.get('currentInstance')
   let accessToken = store.get('accessToken')
 

routes/_actions/follow.js

@@ -14,8 +14,6 @@ export async function setAccountFollowed (accountId, follow, toastOnSuccess) {
     } else {
       account = await unfollowAccount(instanceName, accessToken, accountId)
     }
-    // TODO: hack to let the animation fully play
-    await new Promise(resolve => setTimeout(resolve, 400))
     await updateProfileAndRelationship(accountId)
     let relationship = await database.getRelationship(instanceName, accountId)
     if (toastOnSuccess) {

routes/_components/profile/AccountProfileFollow.html

@@ -1,5 +1,4 @@
-<div class="account-profile-follow">
-  {{#if verifyCredentials && relationship && verifyCredentials.id !== relationship.id}}
+<div class="account-profile-follow {{shown ? 'shown' : ''}}">
   <IconButton
     label="{{followLabel}}"
     href="{{followIcon}}"
@@ -9,12 +8,15 @@
     on:click="onFollowButtonClick(event)"
     animation="{{animateFollowButton && followButtonAnimation}}"
   />
-  {{/if}}
 </div>
 <style>
   .account-profile-follow {
     grid-area: follow;
     align-self: flex-start;
+    display: none;
+  }
+  .account-profile-follow.shown {
+    display: block;
   }
 </style>
 <script>
@@ -32,12 +34,13 @@
         let accountId = this.get('accountId')
         let following = this.get('following')
         let followRequested = this.get('followRequested')
-        this.set({animateFollowButton: true})
+        this.set({animateFollowButton: true}) // TODO: this should be an event, not toggling a boolean
         let newFollowingValue = !(following || followRequested)
-        await setAccountFollowed(accountId, newFollowingValue)
         if (!account.locked) { // be optimistic, show the user that it succeeded
           this.set({overrideFollowing: newFollowingValue})
         }
+        await setAccountFollowed(accountId, newFollowingValue)
+        this.set({animateFollowButton: false}) // let animation play next time
       }
     },
     store: () => store,
@@ -72,6 +75,9 @@
         } else {
           return '#fa-user-plus'
         }
+      },
+      shown: (verifyCredentials, relationship) => {
+        return verifyCredentials && relationship && verifyCredentials.id !== relationship.id
       }
     },
     components: {

routes/_pages/accounts/[accountId].html

@@ -24,13 +24,14 @@
   import { store } from '../../_store/store.js'
   import HiddenFromSSR from '../../_components/HiddenFromSSR'
   import DynamicPageBanner from '../../_components/DynamicPageBanner.html'
-  import { updateProfileAndRelationship } from '../../_actions/accounts'
+  import { updateProfileAndRelationship, clearProfileAndRelationship } from '../../_actions/accounts'
   import AccountProfile from '../../_components/profile/AccountProfile.html'
   import PinnedStatuses from '../../_components/timeline/PinnedStatuses.html'
 
   export default {
     oncreate() {
       let accountId = this.get('params').accountId
+      clearProfileAndRelationship()
       updateProfileAndRelationship(accountId)
     },
     store: () => store,