improve loading spinner

routes/_components/LazyTimeline.html

@@ -1,23 +1,33 @@
-{{#await promise}}
-<div class="loading-page">
-  {{#if trueValue}} <!-- hack to get the transition to work -->
+<div class="lazy-timeline">
+  {{#if loading}}
     <div transition:fade>
+      <div class="loading-page">
         <LoadingSpinner />
       </div>
+    </div>
   {{/if}}
+  {{#await promise}}
+  {{then constructor}}
+    <:Component {constructor} :timeline on:initialized="set({'loading': false})"/>
+  {{catch error}}
+    <div>Component failed to load. Please try refreshing! {{error}}</div>
+  {{/await}}
 </div>
-{{then constructor}}
-<:Component {constructor} :timeline />
-{{catch error}}
-<div>Component failed to load. Please try refreshing! {{error}}</div>
-{{/await}}
 <style>
-  .loading-page {
+  .lazy-timeline {
     width: 100%;
-    min-height: 50vh;
+    min-height: 60vh;
+  }
+  .loading-page {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
     display: flex;
     align-items: center;
     justify-content: center;
+    z-index: 50
   }
 </style>
 <script>
@@ -28,7 +38,7 @@
   export default {
     data: () => ({
       promise: importTimeline(),
-      trueValue: true
+      loading: true
     }),
     components: {
       LoadingSpinner

routes/_components/Status.html

@@ -18,8 +18,8 @@
     <span class="status-author-handle">
       @{{originalAccount.acct}}
     </span>
-    <a class="status-author-date" rel="noopener" target="_blank" href="{{originalAccount.url}}">
-      <time datetime={{createdAtDate}} title="{{accessibleDate}}">{{relativeDate}}</time>
+    <a class="status-author-date" rel="noopener" target="_blank" href="{{originalStatus.uri}}">
+      <time datetime={{createdAtDate}} title="{{relativeDate}}">{{relativeDate}}</time>
     </a>
   </div>
   <Avatar account={{originalAccount}} className="status-sidebar"/>
@@ -214,23 +214,15 @@
     },
     computed: {
       createdAtDate: (status) => status.created_at,
-      accessibleDate: (createdAtDate) => {
-        return Intl.DateTimeFormat('en-US', {
-          year: 'numeric',
-          month: 'long',
-          day: 'numeric',
-          hour: 'numeric',
-          minute: 'numeric'
-        }).format(new Date(createdAtDate))
-      },
       relativeDate: (createdAtDate) => {
         mark('compute relativeDate')
         let res = relativeFormat.format(new Date(createdAtDate))
         stop('compute relativeDate')
         return res
       },
-      originalAccount: (status) => status.reblog ? status.reblog.account : status.account,
-      originalMedia: (status) => status.reblog ? status.reblog.media_attachments : status.media_attachments,
+      originalStatus: (status) => status.reblog ? status.reblog : status,
+      originalAccount: (originalStatus) => originalStatus.account,
+      originalMedia: (originalStatus) => originalStatus.media_attachments,
       minMediaWidth: (originalMedia) => Math.min.apply(Math, originalMedia.map(_ => _.meta.small.width))
     }
   }

routes/_components/Timeline.html

@@ -1,12 +1,12 @@
 <:Window bind:online />
-<div class="timeline" role="feed" aria-label="{{label}}" >
+<div class="timeline" role="feed" aria-label="{{label}}" on:initialized >
   <VirtualList component="{{StatusListItem}}"
                items="{{keyedStatuses}}"
                on:scrollToBottom="onScrollToBottom()" />
 </div>
 <style>
   .timeline {
-    min-height: 50vh;
+    min-height: 60vh;
   }
 </style>
 <script>
@@ -39,6 +39,7 @@
       }
       this.addStatuses(statuses)
       this.set({initialized: true})
+      this.fire('initialized')
     },
     data: () => ({
       StatusListItem: StatusListItem,

routes/_utils/offlineNotification.js

@@ -4,7 +4,7 @@ import { toast } from './toast'
 const OFFLINE_DELAY = 1000
 
 const notifyOffline = debounce(() => {
-  toast.say('You appear to be offline. You can still read toots while offline.')
+  toast.say('You seem to be offline. You can still read toots while offline.')
 }, OFFLINE_DELAY)
 
 const observe = online => {