Merge remote-tracking branch 'origin/develop' into settings-changed

* origin/develop: (306 commits)
  fallback if shadows aren't defined
  Translated using Weblate (Chinese (Traditional))
  Translated using Weblate (Ukrainian)
  Translated using Weblate (Italian)
  Translated using Weblate (Ukrainian)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Italian)
  Translated using Weblate (Russian)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Russian)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  ...

1 files changed, 21 insertions, 30 deletions

diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index c1e2f44b..4c43fe5c 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,24 +1,10 @@
 <template>
-  <div :class="[classes.root, 'timeline']">
+  <div :class="[classes.root, 'Timeline']">
     <div :class="classes.header">
       <TimelineMenu v-if="!embedded" />
-      <div
-        v-if="timelineError"
-        class="loadmore-error alert error"
-        @click.prevent
-      >
-        {{ $t('timeline.error_fetching') }}
-      </div>
-      <div
-        v-else-if="errorData"
-        class="loadmore-error alert error"
-        @click.prevent
-      >
-        {{ errorData.statusText }}
-      </div>
       <button
-        v-else-if="showLoadButton"
-        class="loadmore-button"
+        v-if="showLoadButton"
+        class="button-default loadmore-button"
         @click.prevent="showNewStatuses"
       >
         {{ loadButtonString }}
@@ -75,24 +61,24 @@
       >
         {{ $t('timeline.no_more_statuses') }}
       </div>
-      <a
-        v-else-if="!timeline.loading && !errorData"
-        href="#"
+      <button
+        v-else-if="!timeline.loading"
+        class="button-unstyled -link -fullwidth"
         @click.prevent="fetchOlderStatuses()"
       >
-        <div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div>
-      </a>
-      <a
-        v-else-if="errorData"
-        href="#"
-      >
-        <div class="new-status-notification text-center panel-footer">{{ errorData.error }}</div>
-      </a>
+        <div class="new-status-notification text-center panel-footer">
+          {{ $t('timeline.load_older') }}
+        </div>
+      </button>
       <div
         v-else
         class="new-status-notification text-center panel-footer"
       >
-        <i class="icon-spin3 animate-spin" />
+        <FAIcon
+          icon="circle-notch"
+          spin
+          size="lg"
+        />
       </div>
     </div>
   </div>
@@ -103,15 +89,20 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.timeline {
+.Timeline {
   .loadmore-text {
     opacity: 1;
   }
+
+  &.-blocked {
+    cursor: progress;
+  }
 }
 
 .timeline-heading {
   max-width: 100%;
   flex-wrap: nowrap;
+  align-items: center;
   .loadmore-button {
     flex-shrink: 0;
   }