Display loading and error indicator for conversation page

changelog.d/status-loading-indicator.add

@@ -0,0 +1 @@
+Display loading and error indicator for conversation page

src/components/conversation/conversation.js

@@ -56,7 +56,8 @@ const conversation = {
       expanded: false,
       threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
       statusContentPropertiesObject: {},
-      inlineDivePosition: null
+      inlineDivePosition: null,
+      loadStatusError: null
     }
   },
   props: [
@@ -392,11 +393,15 @@ const conversation = {
             this.setHighlight(this.originalStatusId)
           })
       } else {
+        this.loadStatusError = null
         this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
           .then((status) => {
             this.$store.dispatch('addNewStatuses', { statuses: [status] })
             this.fetchConversation()
           })
+          .catch((error) => {
+            this.loadStatusError = error
+          })
       }
     },
     getReplies (id) {

src/components/conversation/conversation.vue

@@ -29,6 +29,23 @@
       />
     </div>
     <div
+      v-if="isPage && !status"
+      class="conversation-body"
+      :class="{ 'panel-body': isExpanded }"
+    >
+      <p v-if="!loadStatusError">
+        <FAIcon
+          spin
+          icon="circle-notch"
+        />
+        {{ $t('status.loading') }}
+      </p>
+      <p v-else>
+        {{ $t('status.load_error', { error: loadStatusError }) }}
+      </p>
+    </div>
+    <div
+      v-else
       class="conversation-body"
       :class="{ 'panel-body': isExpanded }"
     >

src/i18n/en.json

@@ -1110,7 +1110,9 @@
     "hide_quote": "Hide the quoted status",
     "display_quote": "Display the quoted status",
     "invisible_quote": "Quoted status unavailable: {link}",
-    "more_actions": "More actions on this status"
+    "more_actions": "More actions on this status",
+    "loading": "Loading...",
+    "load_error": "Unable to load status: {error}"
   },
   "user_card": {
     "approve": "Approve",