conversation loading icon and errors

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) {

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

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