perf: ⚡ Performance work, add PWA

2025-12-06 08:28:20 +01:00 · 2024-05-11 21:30:02 -10:00 · 2024-05-11 21:30:02 -10:00 · 6e8f4ae8e1
parent 7d07e639c8
commit 6e8f4ae8e1
19 changed files with 76 additions and 45 deletions
--- a/app.vue
+++ b/app.vue
@ -1,4 +1,5 @@
 <template>
+    <NuxtPwaAssets />
    <NuxtLayout>
        <NuxtPage />
    </NuxtLayout>
@ -32,6 +33,7 @@ useSeoMeta({
    ogDescription: computed(() => convert(description.value?.content ?? "")),
    ogSiteName: "Lysand",
    colorScheme: "dark",
+    themeColor: "#f9a8d4",
 });

 useHead({
--- a/bun.lockb
+++ b/bun.lockb
--- a/components/composer/composer.vue
+++ b/components/composer/composer.vue
@ -11,7 +11,7 @@
                    Quoting
                </span>
                <OverlayScrollbarsComponent :defer="true" class="mt-2 max-h-72 overflow-y-auto">
-                    <SocialElementsNotesNote :note="respondingTo" :small="true" :disabled="true" />
+                    <LazySocialElementsNotesNote :note="respondingTo" :small="true" :disabled="true" />
                </OverlayScrollbarsComponent>
            </div>
            <textarea :disabled="submitting" ref="textarea" v-model="content" :placeholder="chosenSplash"
--- a/components/sidebars/navigation.vue
+++ b/components/sidebars/navigation.vue
@ -53,6 +53,11 @@
                        <Icon name="tabler:letter-n-small" class="size-4 inline -mr-1" aria-hidden="true" />
                    </kbd>
                </ButtonsBase>
+                <ButtonsBase v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker()" title="Update service worker"
+                    class="flex flex-row text-left items-center justify-start gap-3 text-lg ring-2   ring-pink-600 overflow-hidden h-12 w-full duration-200">
+                    <Icon name="tabler:refresh" class="shrink-0 text-2xl" />
+                    <span class="pr-28 line-clamp-1">Update</span>
+                </ButtonsBase>
            </ClientOnly>
        </div>
    </aside>
@ -83,7 +88,14 @@
            <Icon name="tabler:bell" class="text-2xl" />
            <span class="text-xs">Notifications</span>
        </NuxtLink>
-        <DropdownsAdaptiveDropdown>
+        <ClientOnly v-if="$pwa?.needRefresh">
+            <button class="flex flex-col items-center justify-center p-2 rounded ring-2 ring-pink-600"
+                @click="$pwa?.updateServiceWorker(true)">
+                <Icon name="tabler:refresh" class="text-2xl" />
+                <span class="text-xs">Update</span>
+            </button>
+        </ClientOnly>
+        <DropdownsAdaptiveDropdown v-else>
            <template #button>
                <HeadlessMenuButton class="flex flex-col items-center justify-center p-2 rounded">
                    <Icon name="tabler:user" class="text-2xl" />
@ -124,6 +136,7 @@
 </template>

 <script lang="ts" setup>
+const { $pwa } = useNuxtApp();
 const timelines = ref([
    {
        href: "/home",
--- a/components/social-elements/notes/note-content.vue
+++ b/components/social-elements/notes/note-content.vue
@ -14,7 +14,7 @@
                :attachment="attachment" />
        </div>
        <div v-if="isQuote && note?.reblog" class="mt-4">
-            <SocialElementsNotesNote :note="note?.reblog" :small="true" />
+            <LazySocialElementsNotesNote :note="note?.reblog" :small="true" />
        </div>
    </div>
    <div v-else
--- a/components/social-elements/notes/note.vue
+++ b/components/social-elements/notes/note.vue
@ -14,8 +14,8 @@
        </div>
        <SocialElementsNotesReplyHeader v-if="isReply" :account_id="note?.in_reply_to_account_id ?? null" />
        <SocialElementsNotesHeader :note="note" :small="small" />
-        <SocialElementsNotesNoteContent :note="note" :loaded="loaded" :url="url" :content="content" :is-quote="isQuote"
-            :should-hide="shouldHide" />
+        <LazySocialElementsNotesNoteContent :note="note" :loaded="loaded" :url="url" :content="content"
+            :is-quote="isQuote" :should-hide="shouldHide" />
        <Skeleton class="!h-10 w-full mt-6" :enabled="!props.note || !loaded" v-if="!small || !showInteractions">
            <div v-if="showInteractions"
                class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 [&>button]:max-w-28 disabled:*:cursor-not-allowed relative justify-around text-sm h-10 hover:enabled:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
--- a/components/social-elements/notifications/notif.vue
+++ b/components/social-elements/notifications/notif.vue
@ -12,7 +12,7 @@
            </Skeleton>
        </div>
        <div>
-            <SocialElementsNotesNote v-if="notification?.status || !notification" :note="notification?.status"
+            <LazySocialElementsNotesNote v-if="notification?.status || !notification" :note="notification?.status"
                :small="true" />
            <div v-else-if="notification.account" class="p-6 ring-1 ring-white/5 bg-dark-800">
                <SocialElementsUsersSmallCard :account="notification.account" />
--- a/components/timelines/timeline.vue
+++ b/components/timelines/timeline.vue
@ -5,7 +5,7 @@
            <SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
        </TransitionGroup>
        <span ref="skeleton"></span>
-        <SocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
+        <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">
--- a/layouts/app.vue
+++ b/layouts/app.vue
@ -1,16 +1,16 @@
 <template>
    <div class="from-dark-600 to-dark-900 bg-gradient-to-tl min-h-dvh">
-        <SidebarsNavigation />
+        <LazySidebarsNavigation />
        <div class="relative md:pl-20 min-h-dvh flex flex-row overflow-hidden justify-center xl:justify-between">
            <OverlayScrollbarsComponent :defer="true" class="w-full max-h-dvh overflow-y-auto">
                <slot />
            </OverlayScrollbarsComponent>
            <ClientOnly>
-                <CollapsibleAside v-if="width > 1280 && tokenData" direction="right"
+                <LazySidebarsCollapsibleAside v-if="width > 1280 && tokenData" direction="right"
                    class="max-w-md max-h-dvh overflow-y-auto w-full hidden absolute inset-y-0 xl:flex">
-                    <TimelinesTimelineScroller>
-                        <TimelinesNotifications />
-                    </TimelinesTimelineScroller>
+                    <LazyTimelinesTimelineScroller>
+                        <LazyTimelinesLocal />
+                    </LazyTimelinesTimelineScroller>
                    <!-- <div class="mt-auto prose prose-invert prose-sm flex flex-col gap-4 px-10 pb-10" v-if="!tokenData">
                        <div class="text-center">
                            <strong
@ -33,17 +33,15 @@
                            </ButtonsSecondary>
                        </NuxtLink>
                    </div> -->
-                </CollapsibleAside>
+                </LazySidebarsCollapsibleAside>
            </ClientOnly>
        </div>
    </div>
-    <ComposerModal />
+    <LazyComposerModal />
 </template>

 <script setup lang="ts">
-import CollapsibleAside from "~/components/sidebars/collapsible-aside.vue";
 import { OverlayScrollbarsComponent } from "#imports";
-
 const tokenData = useTokenData();
 const { width } = useWindowSize();

--- a/layouts/default.vue
+++ b/layouts/default.vue
@ -1,6 +1,6 @@
 <template>
    <div class="from-dark-600 to-dark-900 bg-gradient-to-tl min-h-dvh pb-20 md:pb-0">
-        <SidebarsNavigation />
+        <LazySidebarsNavigation />
        <slot />
    </div>
 </template>
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@ -10,7 +10,19 @@ export default defineNuxtConfig({
        //"nuxt-shiki",
        "@vee-validate/nuxt",
        "nuxt-security",
+        "@vite-pwa/nuxt",
    ],
+    pwa: {
+        manifest: {
+            name: "Lysand",
+            short_name: "Lysand",
+            description: "Frontend for the Lysand social network",
+            theme_color: "#f9a8d4",
+            display: "standalone",
+            lang: "en",
+            categories: ["social", "development"],
+        },
+    },
    security: {
        headers: {
            // Nuxt DevTools
@ -41,6 +53,11 @@ export default defineNuxtConfig({
                    href: "/favicon.png",
                    type: "image/png",
                },
+                {
+                    rel: "apple-touch-icon",
+                    href: "/favicon.png",
+                    type: "image/png",
+                },
            ],
            htmlAttrs: { lang: "en-us" },
        },
--- a/package.json
+++ b/package.json
@ -31,6 +31,7 @@
        "@tailwindcss/typography": "^0.5.12",
        "@vee-validate/nuxt": "^4.12.6",
        "@vee-validate/zod": "^4.12.6",
+        "@vite-pwa/nuxt": "^0.7.0",
        "c12": "^1.10.0",
        "html-to-text": "^9.0.5",
        "megalodon": "^10.0.0",
--- a/pages/[username]/[uuid].vue
+++ b/pages/[username]/[uuid].vue
@ -1,14 +1,14 @@
 <template>
    <ClientOnly>
        <div v-if="loaded" :defer="true" class="mx-auto max-w-2xl w-full pb-72">
-            <SocialElementsNotesNote v-for="note of context?.ancestors" :note="note" />
+            <LazySocialElementsNotesNote v-for="note of context?.ancestors" :note="note" />
            <div ref="element" class="first:rounded-t last:rounded-b overflow-hidden">
-                <SocialElementsNotesNote class="!rounded-none border-2 border-pink-500" v-if="note" :note="note" />
+                <LazySocialElementsNotesNote class="!rounded-none border-2 border-pink-500" v-if="note" :note="note" />
            </div>
-            <SocialElementsNotesNote v-for="note of context?.descendants" :note="note" />
+            <LazySocialElementsNotesNote v-for="note of context?.descendants" :note="note" />
        </div>
-        <div :defer="true" v-else class="mx-auto max-w-2xl w-full overflow-y-auto">
-            <SocialElementsNotesNote v-for="_ of 5" :skeleton="true" />
+        <div v-else class="mx-auto max-w-2xl w-full overflow-y-auto">
+            <LazySocialElementsNotesNote v-for="_ of 5" :skeleton="true" />
        </div>
    </ClientOnly>
 </template>
--- a/pages/[username]/index.vue
+++ b/pages/[username]/index.vue
@ -1,9 +1,9 @@
 <template>
    <div class="mx-auto max-w-2xl w-full">
-        <TimelinesTimelineScroller>
-            <SocialElementsUsersAccount :account="account ?? undefined" />
-            <TimelinesAccount :id="accountId" :key="accountId" />
-        </TimelinesTimelineScroller>
+        <LazyTimelinesTimelineScroller>
+            <LazySocialElementsUsersAccount :account="account ?? undefined" />
+            <LazyTimelinesAccount :id="accountId" :key="accountId" />
+        </LazyTimelinesTimelineScroller>
    </div>
 </template>

--- a/pages/home.vue
+++ b/pages/home.vue
@ -1,9 +1,9 @@
 <template>
    <div class="mx-auto max-w-2xl w-full">
-        <TimelinesTimelineScroller>
-            <HeadersGreeting />
-            <TimelinesHome />
-        </TimelinesTimelineScroller>
+        <LazyTimelinesTimelineScroller>
+            <LazyHeadersGreeting />
+            <LazyTimelinesHome />
+        </LazyTimelinesTimelineScroller>
    </div>
 </template>

--- a/pages/index.vue
+++ b/pages/index.vue
@ -1,9 +1,9 @@
 <template>
    <div class="mx-auto max-w-2xl w-full">
-        <TimelinesTimelineScroller>
-            <HeadersGreeting />
-            <TimelinesPublic />
-        </TimelinesTimelineScroller>
+        <LazyTimelinesTimelineScroller>
+            <LazyHeadersGreeting />
+            <LazyTimelinesPublic />
+        </LazyTimelinesTimelineScroller>
    </div>
 </template>

--- a/pages/local.vue
+++ b/pages/local.vue
@ -1,9 +1,9 @@
 <template>
    <div class="mx-auto max-w-2xl w-full">
-        <TimelinesTimelineScroller>
-            <HeadersGreeting />
-            <TimelinesLocal />
-        </TimelinesTimelineScroller>
+        <LazyTimelinesTimelineScroller>
+            <LazyHeadersGreeting />
+            <LazyTimelinesLocal />
+        </LazyTimelinesTimelineScroller>
    </div>
 </template>

--- a/pages/notifications.vue
+++ b/pages/notifications.vue
@ -12,12 +12,12 @@
                        sign in</span>
                </button>
            </div>
-            <TimelinesTimelineScroller v-else>
-                <HeadersGreeting />
+            <LazyTimelinesTimelineScroller v-else>
+                <LazyHeadersGreeting />
                <div class="rounded overflow-hidden ring-1 ring-white/10">
-                    <TimelinesNotifications />
+                    <LazyTimelinesNotifications />
                </div>
-            </TimelinesTimelineScroller>
+            </LazyTimelinesTimelineScroller>
        </div>
    </ClientOnly>
 </template>
--- a/pages/public.vue
+++ b/pages/public.vue
@ -1,9 +1,9 @@
 <template>
    <div class="mx-auto max-w-2xl w-full">
-        <TimelinesTimelineScroller>
-            <HeadersGreeting />
+        <LazyTimelinesTimelineScroller>
+            <LazyHeadersGreeting />
            <TimelinesPublic />
-        </TimelinesTimelineScroller>
+        </LazyTimelinesTimelineScroller>
    </div>
 </template>