fix: always show the home compose box (#1109)

* fix: always show the home compose box

fixes #1076

* fix loading visibility

src/routes/_components/TimelineHomePage.html

@@ -7,9 +7,7 @@
   {#if hidePage}
     <LoadingPage />
   {/if}
-  {#if $currentVerifyCredentials }
   <ComposeBox realm="home" hidden={hidePage}/>
-  {/if}
   <div class="timeline-home-anchor-container">
     {#if !hidePage && hideTimeline}
       <LoadingPage />

src/routes/_components/compose/ComposeAuthor.html

@@ -1,13 +1,18 @@
-<a href="/accounts/{verifyCredentials.id}"
+<a {href}
    rel="prefetch"
-   class="compose-box-avatar"
+   class="compose-box-avatar {loaded ? 'loaded' : 'not-loaded'}"
+   aria-hidden={!loaded}
    aria-label="Profile for {accessibleName}">
   <Avatar account={verifyCredentials} size="small"/>
 </a>
-<a class="compose-box-display-name" href="/accounts/{verifyCredentials.id}" rel="prefetch">
+<a class="compose-box-display-name {loaded ? 'loaded' : 'not-loaded'}"
+   {href}
+   aria-hidden={!loaded}
+   rel="prefetch">
   <AccountDisplayName account={verifyCredentials} />
 </a>
-<span class="compose-box-handle">
+<span class="compose-box-handle {loaded ? 'loaded' : 'not-loaded'}"
+      aria-hidden={!loaded} >
   {'@' + verifyCredentials.acct}
 </span>
 <style>
@@ -41,6 +46,12 @@
     font-size: 1.1em;
     margin-left: 5px;
   }
+  .not-loaded {
+    visibility: hidden;
+  }
+  .loaded {
+    visibility: visible;
+  }
 
   @media (max-width: 767px) {
     .compose-box-avatar {
@@ -54,6 +65,7 @@
   import { store } from '../../_store/store'
   import AccountDisplayName from '../profile/AccountDisplayName.html'
   import { removeEmoji } from '../../_utils/removeEmoji'
+  import { ONE_TRANSPARENT_PIXEL } from '../../_static/media'
 
   export default {
     components: {
@@ -62,14 +74,26 @@
     },
     store: () => store,
     computed: {
-      verifyCredentials: ({ $currentVerifyCredentials }) => $currentVerifyCredentials,
+      loaded: ({ $currentVerifyCredentials }) => !!$currentVerifyCredentials,
+      verifyCredentials: ({ $currentVerifyCredentials }) => {
+        // return a placeholder while we're waiting on IndexedDB to load
+        // (https://github.com/nolanlawson/pinafore/issues/1076)
+        return $currentVerifyCredentials || {
+          display_name: '',
+          acct: '',
+          avatar: ONE_TRANSPARENT_PIXEL,
+          avatar_static: ONE_TRANSPARENT_PIXEL
+        }
+      },
+      id: ({ verifyCredentials }) => (verifyCredentials && verifyCredentials.id),
+      href: ({ id }) => (id ? `/accounts/${id}` : '#'),
       emojis: ({ verifyCredentials }) => (verifyCredentials.emojis || []),
       displayName: ({ verifyCredentials }) => verifyCredentials.display_name || verifyCredentials.username,
       accessibleName: ({ displayName, emojis, $omitEmojiInDisplayNames }) => {
         if ($omitEmojiInDisplayNames) {
-          return removeEmoji(displayName, emojis) || displayName
+          return removeEmoji(displayName, emojis) || displayName || ''
         }
-        return displayName
+        return displayName || ''
       }
     }
   }

src/routes/_components/compose/ComposeBox.html

@@ -155,7 +155,9 @@
       media: ({ composeData }) => composeData.media || [],
       inReplyToId: ({ composeData }) => composeData.inReplyToId,
       postPrivacy: ({ postPrivacyKey }) => POST_PRIVACY_OPTIONS.find(_ => _.key === postPrivacyKey),
-      defaultPostPrivacyKey: ({ $currentVerifyCredentials }) => $currentVerifyCredentials.source.privacy,
+      defaultPostPrivacyKey: ({ $currentVerifyCredentials }) => (
+        ($currentVerifyCredentials && $currentVerifyCredentials.source.privacy) || 'public'
+      ),
       postPrivacyKey: ({ composeData, defaultPostPrivacyKey }) => composeData.postPrivacy || defaultPostPrivacyKey,
       textLength: ({ text }) => measureText(text),
       contentWarningLength: ({ contentWarning }) => measureText(contentWarning),