perf: ⚡ Performance work, add PWA

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

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