versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: ✨ Make whole app client-only, add noscript fallback

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-06-15 11:18:58 -10:00
parent 961eccafa0
commit 2266dcd725
No known key found for this signature in database
19 changed files with 597 additions and 604 deletions
Download patch file Download diff file Expand all files Collapse all files

20
components/timelines/Notifications.vue
View file

@ -1,16 +1,12 @@
<template>
<ClientOnly>
<SocialElementsNotificationsNotif v-for="notif of timeline" :key="notif.id" :notification="notif" />
<span ref="skeleton"></span>
<SocialElementsNotificationsNotif v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
<SocialElementsNotificationsNotif v-for="notif of timeline" :key="notif.id" :notification="notif" />
<span ref="skeleton"></span>
<SocialElementsNotificationsNotif v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
<div v-if="hasReachedEnd"
class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
<iconify-icon name="tabler:message-off" width="1.5rem" height="1.5rem" />
<span>No more notifications, you've seen them all</span>
</div>
</ClientOnly>
<div v-if="hasReachedEnd" class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
<iconify-icon name="tabler:message-off" width="1.5rem" height="1.5rem" />
<span>No more notifications, you've seen them all</span>
</div>
</template>
<script lang="ts" setup>
@ -29,7 +25,7 @@ const skeleton = ref<HTMLSpanElement | null>(null);
onMounted(() => {
useIntersectionObserver(skeleton, async (entries) => {
if (
entries[0].isIntersecting &&
entries[0]?.isIntersecting &&
!hasReachedEnd.value &&
!isLoading.value
) {

25
components/timelines/timeline.vue
View file

@ -1,18 +1,15 @@
<template>
<ClientOnly>
<TransitionGroup leave-active-class="ease-in duration-200" leave-from-class="scale-100 opacity-100"
leave-to-class="opacity-0 scale-90">
<SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
</TransitionGroup>
<span ref="skeleton"></span>
<LazySocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
<TransitionGroup leave-active-class="ease-in duration-200" leave-from-class="scale-100 opacity-100"
leave-to-class="opacity-0 scale-90">
<SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
</TransitionGroup>
<span ref="skeleton"></span>
<LazySocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
<div v-if="hasReachedEnd"
class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
<iconify-icon icon="tabler:message-off" width="1.5rem" height="1.5rem" />
<span>No more posts, you've seen them all</span>
</div>
</ClientOnly>
<div v-if="hasReachedEnd" class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
<iconify-icon icon="tabler:message-off" width="1.5rem" height="1.5rem" />
<span>No more posts, you've seen them all</span>
</div>
</template>
<script lang="ts" setup>
@ -32,7 +29,7 @@ const skeleton = ref<HTMLSpanElement | null>(null);
onMounted(() => {
useIntersectionObserver(skeleton, async (entries) => {
if (
entries[0].isIntersecting &&
entries[0]?.isIntersecting &&
!hasReachedEnd.value &&
!isLoading.value
) {