feat: 🎨 Design refactor of all pages

components/timelines/Public.vue

@@ -0,0 +1,49 @@
+<template>
+    <ClientOnly>
+
+        <SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
+        <span ref="skeleton"></span>
+        <SocialElementsNotesNote 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">
+            <Icon name="tabler:message-off" class="h-6 w-6" />
+            <span>No more posts, you've seen them all</span>
+        </div>
+    </ClientOnly>
+</template>
+
+<script lang="ts" setup>
+const client = await useMegalodon();
+
+const isLoading = ref(true);
+
+const timelineParameters = ref({});
+const hasReachedEnd = ref(false);
+const { timeline, loadNext, loadPrev } = usePublicTimeline(
+    client,
+    timelineParameters,
+);
+const skeleton = ref<HTMLSpanElement | null>(null);
+
+onMounted(() => {
+    useIntersectionObserver(skeleton, async (entries) => {
+        if (
+            entries[0].isIntersecting &&
+            !hasReachedEnd.value &&
+            !isLoading.value
+        ) {
+            isLoading.value = true;
+            await loadNext();
+        }
+    });
+});
+
+watch(timeline, (newTimeline, oldTimeline) => {
+    isLoading.value = false;
+    // If less than NOTES_PER_PAGE statuses are returned, we have reached the end
+    if (newTimeline.length - oldTimeline.length < useConfig().NOTES_PER_PAGE) {
+        hasReachedEnd.value = true;
+    }
+});
+</script>