From 12430c90d6da9d7787c9ef4e28addfcf615898d8 Mon Sep 17 00:00:00 2001
From: uwaa <uwaa@noreply.git.rape.pet>
Date: Fri, 24 Jan 2025 05:27:51 +0000
Subject: [PATCH] conversation loading icon and errors

---
 src/components/conversation/conversation.js  | 11 +++++++++
 src/components/conversation/conversation.vue | 24 +++++++++++++++++++-
 src/i18n/en.json                             |  1 +
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 68b90c72..c1cb4ab6 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -50,6 +50,7 @@ const sortAndFilterConversation = (conversation, statusoid) => {
 const conversation = {
   data () {
     return {
+      error: false,
       highlight: null,
       expanded: false,
       threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
@@ -380,6 +381,14 @@ const conversation = {
   },
   methods: {
     fetchConversation () {
+      this.error = false
+      const displayError = (reason) => {
+        if (this.$store.state.users.currentUser) {
+          this.error = reason
+        } else {
+          this.error = this.$t('timeline.unauthorized')
+        }
+      }
       if (this.status) {
         this.$store.state.api.backendInteractor.fetchConversation({ id: this.statusId })
           .then(({ ancestors, descendants }) => {
@@ -387,12 +396,14 @@ const conversation = {
             this.$store.dispatch('addNewStatuses', { statuses: descendants })
             this.setHighlight(this.originalStatusId)
           })
+          .catch(displayError)
       } else {
         this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
           .then((status) => {
             this.$store.dispatch('addNewStatuses', { statuses: [status] })
             this.fetchConversation()
           })
+          .catch(displayError)
       }
     },
     getReplies (id) {
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 61f1358a..9b8c0b3e 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -18,7 +18,21 @@
         {{ $t('timeline.collapse') }}
       </button>
     </div>
-    <div class="conversation-body panel-body">
+    <div
+      v-if="!error"
+      class="conversation-body panel-body"
+    >
+      <div
+        v-if="!status"
+        class="panel user-profile-placeholder"
+      >
+        <div class="panel-body">
+          <FAIcon
+            spin
+            icon="circle-notch"
+          />
+        </div>
+      </div>
       <div
         v-if="isTreeView"
         class="thread-body"
@@ -188,6 +202,14 @@
         />
       </div>
     </div>
+    <div
+      v-else
+      class="panel user-profile-placeholder"
+    >
+      <div class="panel-body">
+        <span v-if="error">{{ error }}</span>
+      </div>
+    </div>
   </div>
   <div
     v-else
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a887d2cf..c9253fe1 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1058,6 +1058,7 @@
         "collapse": "Collapse",
         "conversation": "Conversation",
         "error": "Can't find the timeline: {0}",
+        "unauthorized": "Please log in to view this status.",
         "follow_tag": "Follow hashtag",
         "load_older": "Load older posts",
         "no_more_statuses": "No more posts",