From accc6fffbecd78c5aa50cf877df7e9c9511f2154 Mon Sep 17 00:00:00 2001
From: silverpill <silverpill@firemail.cc>
Date: Tue, 29 Nov 2022 23:32:37 +0000
Subject: [PATCH] Add loader to local timeline and thread page

---
 src/views/PostDetail.vue     | 10 ++++++++--
 src/views/PublicTimeline.vue | 13 +++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/views/PostDetail.vue b/src/views/PostDetail.vue
index c3de96a..2e71cc7 100644
--- a/src/views/PostDetail.vue
+++ b/src/views/PostDetail.vue
@@ -15,6 +15,7 @@
         @comment-created="onCommentCreated(index, $event)"
         @post-deleted="onPostDeleted(index)"
       ></post>
+      <loader v-if="isLoading"></loader>
     </template>
   </sidebar-layout>
 </template>
@@ -25,6 +26,7 @@ import { $, $ref } from "vue/macros"
 import { useRoute } from "vue-router"
 
 import { Post as PostObject, getPostContext } from "@/api/posts"
+import Loader from "@/components/Loader.vue"
 import Post from "@/components/Post.vue"
 import SidebarLayout from "@/components/SidebarLayout.vue"
 import { useCurrentUser } from "@/store/user"
@@ -36,11 +38,11 @@ let selectedId = $ref(route.params.postId as string)
 let highlightedId = $ref<string | null>(null)
 let thread = $ref<PostObject[]>([])
 let isLoading = $ref(true)
-const loader = $ref(getPostContext(authToken, selectedId))
+const loaded = $ref(getPostContext(authToken, selectedId))
 
 onMounted(async () => {
   try {
-    thread = await loader
+    thread = await loaded
   } catch (error: any) {
     if (error.message === "post not found") {
       // Show "not found" text
@@ -118,4 +120,8 @@ function onPostDeleted(postIndex: number) {
 .post {
   margin: 0 0 $block-outer-padding;
 }
+
+.loader {
+  margin: $block-outer-padding auto;
+}
 </style>
diff --git a/src/views/PublicTimeline.vue b/src/views/PublicTimeline.vue
index d2a69ce..6571b64 100644
--- a/src/views/PublicTimeline.vue
+++ b/src/views/PublicTimeline.vue
@@ -2,6 +2,7 @@
   <sidebar-layout>
     <template #content>
       <post-list :posts="posts" @load-next-page="loadNextPage"></post-list>
+      <loader v-if="isLoading"></loader>
     </template>
   </sidebar-layout>
 </template>
@@ -11,16 +12,20 @@ import { onMounted } from "vue"
 import { $ref } from "vue/macros"
 
 import { Post, getPublicTimeline } from "@/api/posts"
+import Loader from "@/components/Loader.vue"
 import PostList from "@/components/PostList.vue"
 import SidebarLayout from "@/components/SidebarLayout.vue"
 import { useCurrentUser } from "@/store/user"
 
 const { ensureAuthToken } = useCurrentUser()
 let posts = $ref<Post[]>([])
+let isLoading = $ref(false)
 
 onMounted(async () => {
   const authToken = ensureAuthToken()
+  isLoading = true
   posts = await getPublicTimeline(authToken)
+  isLoading = false
 })
 
 async function loadNextPage(maxId: string) {
@@ -29,3 +34,11 @@ async function loadNextPage(maxId: string) {
   posts.push(...nextPage)
 }
 </script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+
+.loader {
+  margin: $block-outer-padding auto;
+}
+</style>