From b173741f870243c6ded3b6f400827f8c00f20bb7 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sun, 14 Apr 2024 11:46:29 -0400
Subject: [PATCH] Display loading and error indicator for conversation page

---
 changelog.d/status-loading-indicator.add     |  1 +
 src/components/conversation/conversation.js  |  7 ++++++-
 src/components/conversation/conversation.vue | 17 +++++++++++++++++
 src/i18n/en.json                             |  4 +++-
 4 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 changelog.d/status-loading-indicator.add

diff --git a/changelog.d/status-loading-indicator.add b/changelog.d/status-loading-indicator.add
new file mode 100644
index 0000000000..d07256776c
--- /dev/null
+++ 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
index 85e6d8ad5f..a94d2130dc 100644
--- 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
index 171e67174d..526de5c307 100644
--- 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
index 8b7d60217e..a011139acc 100644
--- 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",