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",