perf: ⚡ Performance work, add PWA

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({

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"

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",

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

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"
+        <LazySocialElementsNotesNoteContent :note="note" :loaded="loaded" :url="url" :content="content"
-            :should-hide="shouldHide" />
+            :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">

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" />

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">

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>
+                    <LazyTimelinesTimelineScroller>
-                        <TimelinesNotifications />
+                        <LazyTimelinesLocal />
-                    </TimelinesTimelineScroller>
+                    </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();
 

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>

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" },
         },

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",

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">
+        <div v-else class="mx-auto max-w-2xl w-full overflow-y-auto">
-            <SocialElementsNotesNote v-for="_ of 5" :skeleton="true" />
+            <LazySocialElementsNotesNote v-for="_ of 5" :skeleton="true" />
         </div>
     </ClientOnly>
 </template>

pages/[username]/index.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="mx-auto max-w-2xl w-full">
-        <TimelinesTimelineScroller>
+        <LazyTimelinesTimelineScroller>
-            <SocialElementsUsersAccount :account="account ?? undefined" />
+            <LazySocialElementsUsersAccount :account="account ?? undefined" />
-            <TimelinesAccount :id="accountId" :key="accountId" />
+            <LazyTimelinesAccount :id="accountId" :key="accountId" />
-        </TimelinesTimelineScroller>
+        </LazyTimelinesTimelineScroller>
     </div>
 </template>
 

pages/home.vue

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

pages/index.vue

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

pages/local.vue

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

pages/notifications.vue

@@ -12,12 +12,12 @@
                         sign in</span>
                 </button>
             </div>
-            <TimelinesTimelineScroller v-else>
+            <LazyTimelinesTimelineScroller v-else>
-                <HeadersGreeting />
+                <LazyHeadersGreeting />
                 <div class="rounded overflow-hidden ring-1 ring-white/10">
-                    <TimelinesNotifications />
+                    <LazyTimelinesNotifications />
                 </div>
-            </TimelinesTimelineScroller>
+            </LazyTimelinesTimelineScroller>
         </div>
     </ClientOnly>
 </template>

pages/public.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="mx-auto max-w-2xl w-full">
-        <TimelinesTimelineScroller>
+        <LazyTimelinesTimelineScroller>
-            <HeadersGreeting />
+            <LazyHeadersGreeting />
             <TimelinesPublic />
-        </TimelinesTimelineScroller>
+        </LazyTimelinesTimelineScroller>
     </div>
 </template>