better display of empty/initially-loading timeline

src/components/timeline/timeline.js

@@ -31,6 +31,7 @@ const Timeline = {
     embedded: Boolean,
     inProfile: Boolean,
     skipPinned: Boolean,
+    hideEmpty: Boolean,
   },
   data() {
     return {

src/components/timeline/timeline.scss

@@ -4,6 +4,14 @@
     backdrop-filter: none;
   }
 
+  .timeline-placeholder {
+    background: var(--background);
+    display: flex;
+    place-items: center;
+    place-content: center;
+    padding: 5em;
+  }
+
   .alert-badge {
     font-size: 0.75em;
     line-height: 1;

src/components/timeline/timeline.vue

@@ -94,6 +94,24 @@
           collapsable
         />
       </div>
+      <template v-if="!hideEmpty && count === 0">
+        <div
+          v-if="timeline.fetcher.loadingNewer || timeline.fetcher.loadingOlder"
+          class="timeline-placeholder"
+        >
+          <FAIcon
+            icon="circle-notch"
+            spin
+            size="4x"
+          />
+        </div>
+        <div
+          v-else
+          class="timeline-placeholder faint"
+        >
+          {{ $t('timeline.no_statuses') }}
+        </div>
+      </template>
     </div>
     <div v-if="!embedded || footerSlipgate" :class="classes.footer">
       <teleport
@@ -101,28 +119,13 @@
         :disabled="!embedded || !footerSlipgate"
       >
         <div
-          v-if="count === 0"
-          class="new-status-notification text-center faint"
-        >
-          {{ $t('timeline.no_statuses') }}
-        </div>
-        <div
-          v-else-if="timeline.fetcher.bottomedOut"
+          v-if="timeline.fetcher.bottomedOut"
           class="new-status-notification text-center faint"
         >
           {{ $t('timeline.no_more_statuses') }}
         </div>
-        <button
-          v-else-if="!timeline.fetcher.loadingOlder"
-          class="button-unstyled -link"
-          @click.prevent="fetchOlderStatuses()"
-        >
-          <div class="new-status-notification text-center">
-            {{ $t('timeline.load_older') }}
-          </div>
-        </button>
         <div
-          v-else
+          v-else-if="timeline.fetcher.loadingOlder"
           class="new-status-notification text-center"
         >
           <FAIcon
@@ -131,6 +134,15 @@
             size="lg"
           />
         </div>
+        <button
+          v-else-if="timeline.minId !== ''"
+          class="button-unstyled -link"
+          @click.prevent="fetchOlderStatuses()"
+        >
+          <div class="new-status-notification text-center">
+            {{ $t('timeline.load_older') }}
+          </div>
+        </button>
       </teleport>
       <!-- spacer to avoid having empty shrug -->
       <span v-if="embedded && footerSlipgate" />

src/components/user_profile/user_profile.vue

@@ -30,6 +30,7 @@
             :timeline-ref="{ name: 'userPinned', argument: userId }"
             embedded
             in-profile
+            hide-empty
           />
           <Timeline
             :timeline-ref="{ name: 'user', argument: userId }"

src/stores/fetchers/timeline_fetcher.js

@@ -52,9 +52,13 @@ const timelineFetcher = (timeline, argument, credentials) => {
 
     const numStatusesBeforeFetch = timeline.statusIds.size
 
-    if (bottomedOut.value) return
+    if (older && bottomedOut.value) return
     return fetchTimeline(args)
       .then(({ data: statuses, pagination, timestamp }) => {
+        // No statuses for timeline, ever.
+        if (timeline.order.length === 0 && statuses.length === 0) {
+          bottomedOut.value = true
+        }
         if (!older && statuses.length >= 20 && numStatusesBeforeFetch > 0) {
           useTimelinesStore().requireReload(timeline.name)
         }