FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Add loader to local timeline and thread page

Browse source
This commit is contained in:
silverpill 2022-11-29 23:32:37 +00:00
parent 05982a10fc
commit accc6fffbe
2 changed files with 21 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/views/PostDetail.vue
View file

@ -15,6 +15,7 @@
@comment-created="onCommentCreated(index, $event)" @comment-created="onCommentCreated(index, $event)"
@post-deleted="onPostDeleted(index)" @post-deleted="onPostDeleted(index)"
></post> ></post>
<loader v-if="isLoading"></loader>
</template> </template>
</sidebar-layout> </sidebar-layout>
</template> </template>
@ -25,6 +26,7 @@ import { $, $ref } from "vue/macros"
import { useRoute } from "vue-router" import { useRoute } from "vue-router"
import { Post as PostObject, getPostContext } from "@/api/posts" import { Post as PostObject, getPostContext } from "@/api/posts"
import Loader from "@/components/Loader.vue"
import Post from "@/components/Post.vue" import Post from "@/components/Post.vue"
import SidebarLayout from "@/components/SidebarLayout.vue" import SidebarLayout from "@/components/SidebarLayout.vue"
import { useCurrentUser } from "@/store/user" import { useCurrentUser } from "@/store/user"
@ -36,11 +38,11 @@ let selectedId = $ref(route.params.postId as string)
let highlightedId = $ref<string | null>(null) let highlightedId = $ref<string | null>(null)
let thread = $ref<PostObject[]>([]) let thread = $ref<PostObject[]>([])
let isLoading = $ref(true) let isLoading = $ref(true)
const loader = $ref(getPostContext(authToken, selectedId)) const loaded = $ref(getPostContext(authToken, selectedId))
onMounted(async () => { onMounted(async () => {
try { try {
thread = await loader thread = await loaded
} catch (error: any) { } catch (error: any) {
if (error.message === "post not found") { if (error.message === "post not found") {
// Show "not found" text // Show "not found" text
@ -118,4 +120,8 @@ function onPostDeleted(postIndex: number) {
.post { .post {
margin: 0 0 $block-outer-padding; margin: 0 0 $block-outer-padding;
} }
.loader {
margin: $block-outer-padding auto;
}
</style> </style>

13
src/views/PublicTimeline.vue
View file

@ -2,6 +2,7 @@
<sidebar-layout> <sidebar-layout>
<template #content> <template #content>
<post-list :posts="posts" @load-next-page="loadNextPage"></post-list> <post-list :posts="posts" @load-next-page="loadNextPage"></post-list>
<loader v-if="isLoading"></loader>
</template> </template>
</sidebar-layout> </sidebar-layout>
</template> </template>
@ -11,16 +12,20 @@ import { onMounted } from "vue"
import { $ref } from "vue/macros" import { $ref } from "vue/macros"
import { Post, getPublicTimeline } from "@/api/posts" import { Post, getPublicTimeline } from "@/api/posts"
import Loader from "@/components/Loader.vue"
import PostList from "@/components/PostList.vue" import PostList from "@/components/PostList.vue"
import SidebarLayout from "@/components/SidebarLayout.vue" import SidebarLayout from "@/components/SidebarLayout.vue"
import { useCurrentUser } from "@/store/user" import { useCurrentUser } from "@/store/user"
const { ensureAuthToken } = useCurrentUser() const { ensureAuthToken } = useCurrentUser()
let posts = $ref<Post[]>([]) let posts = $ref<Post[]>([])
let isLoading = $ref(false)
onMounted(async () => { onMounted(async () => {
const authToken = ensureAuthToken() const authToken = ensureAuthToken()
isLoading = true
posts = await getPublicTimeline(authToken) posts = await getPublicTimeline(authToken)
isLoading = false
}) })
async function loadNextPage(maxId: string) { async function loadNextPage(maxId: string) {
@ -29,3 +34,11 @@ async function loadNextPage(maxId: string) {
posts.push(...nextPage) posts.push(...nextPage)
} }
</script> </script>
<style scoped lang="scss">
@import "../styles/layout";
.loader {
margin: $block-outer-padding auto;
}
</style>