pleroma-fe

commit: b173741f870243c6ded3b6f400827f8c00f20bb7
parent 39269c4829d9f779204b3b5954b3af6d2b9f3582
Author: tusooa <tusooa@kazv.moe>
Date:   Sun, 14 Apr 2024 11:46:29 -0400

Display loading and error indicator for conversation page

Diffstat:
A
changelog.d/status-loading-indicator.add
1
+
M
src/components/conversation/conversation.js
7
++++++-
M
src/components/conversation/conversation.vue
17
+++++++++++++++++
M
src/i18n/en.json
4
+++-

4 files changed, 27 insertions(+), 2 deletions(-)
diff --git a/changelog.d/status-loading-indicator.add b/changelog.d/status-loading-indicator.add
@@ -0,0 +1 @@
+Display loading and error indicator for conversation page
diff --git a/src/components/conversation/conversation.js b/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) {
diff --git a/src/components/conversation/conversation.vue b/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 }"
     >
diff --git a/src/i18n/en.json b/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",