From 62d7006e0d710ae6a1170ddaaf6232976971cc30 Mon Sep 17 00:00:00 2001
From: Pavel Mironov <pashamironow@gmail.com>
Date: Wed, 24 Jan 2024 03:04:53 +0100
Subject: [PATCH 1/6] add: transition loader

---
 app.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app.vue b/app.vue
index 3a779c70..e242b3ca 100644
--- a/app.vue
+++ b/app.vue
@@ -6,6 +6,7 @@
         <NavbarMobile />
       </header>
     </client-only>
+    <NuxtLoadingIndicator :throttle="5000" />
     <NuxtLayout v-if="ready">
       <NuxtPage />
     </NuxtLayout>

From f6ce9ae6f26d9fdfe1d0d64eddda766651a1f1cf Mon Sep 17 00:00:00 2001
From: Pavel Mironov <pashamironow@gmail.com>
Date: Wed, 24 Jan 2024 03:05:20 +0100
Subject: [PATCH 2/6] chore: remove no-prefetch from navbars

---
 components/NavbarDesktop.vue | 15 ++-------------
 components/NavbarMobile.vue  |  8 +-------
 2 files changed, 3 insertions(+), 20 deletions(-)

diff --git a/components/NavbarDesktop.vue b/components/NavbarDesktop.vue
index 7eb1043a..5ecea1c2 100644
--- a/components/NavbarDesktop.vue
+++ b/components/NavbarDesktop.vue
@@ -4,7 +4,7 @@
     class="ourBack d-none d-xl-flex pl-1 pr-2 navbar-dark navbar-expand-xl"
     fixed="top"
   >
-    <nuxt-link :to="homePage" class="navbar-brand p-0" no-prefetch>
+    <nuxt-link :to="homePage" class="navbar-brand p-0">
       <OfflineIndicator v-if="!online" />
       <b-img
         v-else
@@ -35,7 +35,6 @@
         <li>
           <nuxt-link
             id="menu-option-mygroups"
-            no-prefetch
             class="nav-link text-center small p-0 ml-2"
             to="/browse"
             @mousedown="maybeReload('/browse')"
@@ -58,7 +57,6 @@
         <li>
           <nuxt-link
             id="menu-option-give"
-            no-prefetch
             class="nav-link text-center small p-0"
             to="/give"
             @mousedown="maybeReload('/give')"
@@ -71,7 +69,6 @@
         <li>
           <nuxt-link
             id="menu-option-find"
-            no-prefetch
             class="nav-link text-center small p-0"
             to="/find"
             @mousedown="maybeReload('/find')"
@@ -84,7 +81,6 @@
         <li>
           <nuxt-link
             id="menu-option-myposts"
-            no-prefetch
             class="nav-link text-center small p-0"
             to="/myposts"
             @mousedown="maybeReload('/myposts')"
@@ -107,7 +103,6 @@
         <li>
           <nuxt-link
             id="menu-option-chitchat"
-            no-prefetch
             class="nav-link text-center small p-0"
             to="/chitchat"
             @mousedown="maybeReload('/chitchat')"
@@ -130,7 +125,6 @@
         <li>
           <nuxt-link
             id="menu-option-communityevents"
-            no-prefetch
             class="nav-link text-center small p-0"
             to="/communityevents"
             @mousedown="maybeReload('/communityevents')"
@@ -143,7 +137,6 @@
         <li>
           <nuxt-link
             id="menu-option-volunteering"
-            no-prefetch
             class="nav-link text-center small p-0"
             to="/volunteerings"
             @mousedown="maybeReload('/volunteerings')"
@@ -175,7 +168,6 @@
         <li>
           <nuxt-link
             id="menu-option-spread"
-            no-prefetch
             class="nav-link text-center small p-0"
             to="/promote"
             @mousedown="maybeReload('/promote')"
@@ -190,7 +182,6 @@
         <li>
           <nuxt-link
             id="menu-option-help"
-            no-prefetch
             class="nav-link text-center small p-0"
             to="/help"
             @mousedown="maybeReload('/help')"
@@ -203,7 +194,6 @@
         <li>
           <nuxt-link
             id="menu-option-settings"
-            no-prefetch
             class="nav-link text-center small p-0"
             to="/settings"
             @mousedown="maybeReload('/settings')"
@@ -216,7 +206,6 @@
         <li>
           <nuxt-link
             id="menu-option-logout"
-            no-prefetch
             class="nav-link text-center p-0 small clickme"
             @click="logout"
           >
@@ -228,7 +217,7 @@
       </ul>
     </div>
     <div v-if="!loggedIn" class="navbar-nav ml-auto">
-      <div class="nav-item" no-prefetch>
+      <div class="nav-item">
         <b-button variant="white" class="mr-2" @click="requestLogin">
           Sign&nbsp;in
         </b-button>
diff --git a/components/NavbarMobile.vue b/components/NavbarMobile.vue
index 69f6edd0..08c23625 100644
--- a/components/NavbarMobile.vue
+++ b/components/NavbarMobile.vue
@@ -41,7 +41,7 @@
     </div>
     <div class="d-flex align-items-center">
       <b-nav>
-        <nuxt-link v-if="!loggedIn" no-prefetch>
+        <nuxt-link v-if="!loggedIn">
           <div class="btn btn-white mr-2" @click="requestLogin">
             Log in or Join
           </div>
@@ -89,7 +89,6 @@
     }"
   >
     <nuxt-link
-      no-prefetch
       class="nav-link text-center p-0 botmen"
       to="/browse"
       @click="clickedMobileNav"
@@ -119,7 +118,6 @@
       <div class="chatup text-white">Chats</div>
     </div>
     <nuxt-link
-      no-prefetch
       class="nav-link text-center p-0 botmen"
       to="/myposts"
       @click="clickedMobileNav"
@@ -143,7 +141,6 @@
       <NavbarMobilePost class="navpost" />
       <div class="d-flex justify-content-around navpostnav">
         <nuxt-link
-          no-prefetch
           class="nav-link text-center p-0 botmen"
           to="/post"
           @click="clickedMobileNav"
@@ -158,7 +155,6 @@
       </div>
     </div>
     <nuxt-link
-      no-prefetch
       class="nav-link text-center p-0 botmen"
       to="/chitchat"
       @click="clickedMobileNav"
@@ -179,7 +175,6 @@
       </div>
     </nuxt-link>
     <nuxt-link
-      no-prefetch
       class="nav-link text-center p-0 botmen"
       to="/promote"
       @click="clickedMobileNav"
@@ -190,7 +185,6 @@
       <div class="nav-item__text">Promote</div>
     </nuxt-link>
     <nuxt-link
-      no-prefetch
       class="nav-link text-center p-0 botmen"
       to="/help"
       @click="clickedMobileNav"

From 6734ef76d98aefb8014367d88e1160b885939414 Mon Sep 17 00:00:00 2001
From: Pavel Mironov <pashamironow@gmail.com>
Date: Fri, 26 Jan 2024 02:34:08 +0100
Subject: [PATCH 3/6] feat: loader after 5s on slow internet

---
 .eslintrc.js |  1 +
 app.vue      | 23 +++++++++++++++++------
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 0dccdd3b..8a17ecc2 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -55,6 +55,7 @@ module.exports = {
     useLazyAsyncData: 'readonly',
     createApp: 'readonly',
     useNuxtApp: 'readonly',
+    useLoadingIndicator: 'readonly',
     useHead: 'readonly',
     useRouter: 'readonly',
     ref: 'readonly',
diff --git a/app.vue b/app.vue
index e242b3ca..86bd8b10 100644
--- a/app.vue
+++ b/app.vue
@@ -5,11 +5,20 @@
         <NavbarDesktop />
         <NavbarMobile />
       </header>
+      <div class="position-absolute top-50 start-50 translate-middle z-3">
+        <LoadingIndicator :throttle="loadingIndicatorThrottle" />
+      </div>
     </client-only>
-    <NuxtLoadingIndicator :throttle="5000" />
-    <NuxtLayout v-if="ready">
-      <NuxtPage />
-    </NuxtLayout>
+    <div
+      :style="{
+        filter: isLoading ? 'blur(1rem)' : 'unset',
+      }"
+      v-if="ready"
+    >
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </div>
   </div>
 </template>
 <script setup>
@@ -49,7 +58,10 @@ import { computed, watch, reloadNuxtApp } from '#imports'
 import 'core-js/actual/array/to-sorted'
 
 const route = useRoute()
-
+const loadingIndicatorThrottle = ref(5000)
+const { isLoading } = useLoadingIndicator({
+  throttle: loadingIndicatorThrottle.value,
+})
 // Don't render the app until we've done everything in here.
 let ready = false
 
@@ -209,6 +221,5 @@ if (process.client) {
     },
   })
 }
-
 ready = true
 </script>

From ff7f1a7a2bbec5453f8d20ace58d301ba330ef67 Mon Sep 17 00:00:00 2001
From: Pavel Mironov <pashamironow@gmail.com>
Date: Fri, 26 Jan 2024 13:39:11 +0100
Subject: [PATCH 4/6] add: loading indicator component

---
 components/LoadingIndicator.vue | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 components/LoadingIndicator.vue

diff --git a/components/LoadingIndicator.vue b/components/LoadingIndicator.vue
new file mode 100644
index 00000000..60377746
--- /dev/null
+++ b/components/LoadingIndicator.vue
@@ -0,0 +1,32 @@
+<template>
+  <div :style="{ opacity: isLoading ? 1 : 0 }">
+    <b-img
+      lazy
+      src="/loader.gif"
+      alt="Loading"
+      :width="`${width}px`"
+      :height="`${height}px`"
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  width: {
+    type: Number,
+    default: 100,
+  },
+  height: {
+    type: Number,
+    default: 100,
+  },
+  throttle: {
+    type: Number,
+    default: 0,
+  },
+})
+
+const { isLoading } = useLoadingIndicator({
+  throttle: props.throttle,
+})
+</script>

From 1c8d39e8d47e0b064dc9f6adec8e72eafa6f37b0 Mon Sep 17 00:00:00 2001
From: Pavel Mironov <pashamironow@gmail.com>
Date: Fri, 26 Jan 2024 13:40:19 +0100
Subject: [PATCH 5/6] Revert "chore: remove no-prefetch from navbars"

This reverts commit f6ce9ae6f26d9fdfe1d0d64eddda766651a1f1cf.
---
 components/NavbarDesktop.vue | 15 +++++++++++++--
 components/NavbarMobile.vue  |  8 +++++++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/components/NavbarDesktop.vue b/components/NavbarDesktop.vue
index 5ecea1c2..7eb1043a 100644
--- a/components/NavbarDesktop.vue
+++ b/components/NavbarDesktop.vue
@@ -4,7 +4,7 @@
     class="ourBack d-none d-xl-flex pl-1 pr-2 navbar-dark navbar-expand-xl"
     fixed="top"
   >
-    <nuxt-link :to="homePage" class="navbar-brand p-0">
+    <nuxt-link :to="homePage" class="navbar-brand p-0" no-prefetch>
       <OfflineIndicator v-if="!online" />
       <b-img
         v-else
@@ -35,6 +35,7 @@
         <li>
           <nuxt-link
             id="menu-option-mygroups"
+            no-prefetch
             class="nav-link text-center small p-0 ml-2"
             to="/browse"
             @mousedown="maybeReload('/browse')"
@@ -57,6 +58,7 @@
         <li>
           <nuxt-link
             id="menu-option-give"
+            no-prefetch
             class="nav-link text-center small p-0"
             to="/give"
             @mousedown="maybeReload('/give')"
@@ -69,6 +71,7 @@
         <li>
           <nuxt-link
             id="menu-option-find"
+            no-prefetch
             class="nav-link text-center small p-0"
             to="/find"
             @mousedown="maybeReload('/find')"
@@ -81,6 +84,7 @@
         <li>
           <nuxt-link
             id="menu-option-myposts"
+            no-prefetch
             class="nav-link text-center small p-0"
             to="/myposts"
             @mousedown="maybeReload('/myposts')"
@@ -103,6 +107,7 @@
         <li>
           <nuxt-link
             id="menu-option-chitchat"
+            no-prefetch
             class="nav-link text-center small p-0"
             to="/chitchat"
             @mousedown="maybeReload('/chitchat')"
@@ -125,6 +130,7 @@
         <li>
           <nuxt-link
             id="menu-option-communityevents"
+            no-prefetch
             class="nav-link text-center small p-0"
             to="/communityevents"
             @mousedown="maybeReload('/communityevents')"
@@ -137,6 +143,7 @@
         <li>
           <nuxt-link
             id="menu-option-volunteering"
+            no-prefetch
             class="nav-link text-center small p-0"
             to="/volunteerings"
             @mousedown="maybeReload('/volunteerings')"
@@ -168,6 +175,7 @@
         <li>
           <nuxt-link
             id="menu-option-spread"
+            no-prefetch
             class="nav-link text-center small p-0"
             to="/promote"
             @mousedown="maybeReload('/promote')"
@@ -182,6 +190,7 @@
         <li>
           <nuxt-link
             id="menu-option-help"
+            no-prefetch
             class="nav-link text-center small p-0"
             to="/help"
             @mousedown="maybeReload('/help')"
@@ -194,6 +203,7 @@
         <li>
           <nuxt-link
             id="menu-option-settings"
+            no-prefetch
             class="nav-link text-center small p-0"
             to="/settings"
             @mousedown="maybeReload('/settings')"
@@ -206,6 +216,7 @@
         <li>
           <nuxt-link
             id="menu-option-logout"
+            no-prefetch
             class="nav-link text-center p-0 small clickme"
             @click="logout"
           >
@@ -217,7 +228,7 @@
       </ul>
     </div>
     <div v-if="!loggedIn" class="navbar-nav ml-auto">
-      <div class="nav-item">
+      <div class="nav-item" no-prefetch>
         <b-button variant="white" class="mr-2" @click="requestLogin">
           Sign&nbsp;in
         </b-button>
diff --git a/components/NavbarMobile.vue b/components/NavbarMobile.vue
index 08c23625..69f6edd0 100644
--- a/components/NavbarMobile.vue
+++ b/components/NavbarMobile.vue
@@ -41,7 +41,7 @@
     </div>
     <div class="d-flex align-items-center">
       <b-nav>
-        <nuxt-link v-if="!loggedIn">
+        <nuxt-link v-if="!loggedIn" no-prefetch>
           <div class="btn btn-white mr-2" @click="requestLogin">
             Log in or Join
           </div>
@@ -89,6 +89,7 @@
     }"
   >
     <nuxt-link
+      no-prefetch
       class="nav-link text-center p-0 botmen"
       to="/browse"
       @click="clickedMobileNav"
@@ -118,6 +119,7 @@
       <div class="chatup text-white">Chats</div>
     </div>
     <nuxt-link
+      no-prefetch
       class="nav-link text-center p-0 botmen"
       to="/myposts"
       @click="clickedMobileNav"
@@ -141,6 +143,7 @@
       <NavbarMobilePost class="navpost" />
       <div class="d-flex justify-content-around navpostnav">
         <nuxt-link
+          no-prefetch
           class="nav-link text-center p-0 botmen"
           to="/post"
           @click="clickedMobileNav"
@@ -155,6 +158,7 @@
       </div>
     </div>
     <nuxt-link
+      no-prefetch
       class="nav-link text-center p-0 botmen"
       to="/chitchat"
       @click="clickedMobileNav"
@@ -175,6 +179,7 @@
       </div>
     </nuxt-link>
     <nuxt-link
+      no-prefetch
       class="nav-link text-center p-0 botmen"
       to="/promote"
       @click="clickedMobileNav"
@@ -185,6 +190,7 @@
       <div class="nav-item__text">Promote</div>
     </nuxt-link>
     <nuxt-link
+      no-prefetch
       class="nav-link text-center p-0 botmen"
       to="/help"
       @click="clickedMobileNav"

From 09d74678d4e1fd99d9f1ee360f0abb44d70ec7dc Mon Sep 17 00:00:00 2001
From: Pavel Mironov <pashamironow@gmail.com>
Date: Sat, 27 Jan 2024 15:18:13 +0100
Subject: [PATCH 6/6] add: transition animation to loading indicator

---
 app.vue                         | 14 ++++++++++++--
 components/LoadingIndicator.vue | 18 +++++++++++++++++-
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/app.vue b/app.vue
index 86bd8b10..c16f689d 100644
--- a/app.vue
+++ b/app.vue
@@ -6,14 +6,18 @@
         <NavbarMobile />
       </header>
       <div class="position-absolute top-50 start-50 translate-middle z-3">
-        <LoadingIndicator :throttle="loadingIndicatorThrottle" />
+        <LoadingIndicator
+          with-transition
+          :throttle="loadingIndicatorThrottle"
+        />
       </div>
     </client-only>
     <div
+      v-if="ready"
+      class="nuxt-layout-wrapper"
       :style="{
         filter: isLoading ? 'blur(1rem)' : 'unset',
       }"
-      v-if="ready"
     >
       <NuxtLayout>
         <NuxtPage />
@@ -223,3 +227,9 @@ if (process.client) {
 }
 ready = true
 </script>
+
+<style lang="scss">
+.nuxt-layout-wrapper {
+  transition: all 0.25s;
+}
+</style>
diff --git a/components/LoadingIndicator.vue b/components/LoadingIndicator.vue
index 60377746..9ee0207e 100644
--- a/components/LoadingIndicator.vue
+++ b/components/LoadingIndicator.vue
@@ -1,5 +1,9 @@
 <template>
-  <div :style="{ opacity: isLoading ? 1 : 0 }">
+  <div
+    class="loading-indicator"
+    :style="{ opacity: isLoading ? 1 : 0 }"
+    :class="{ 'loading-indicator--transitioned': withTransition }"
+  >
     <b-img
       lazy
       src="/loader.gif"
@@ -24,9 +28,21 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  withTransition: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const { isLoading } = useLoadingIndicator({
   throttle: props.throttle,
 })
 </script>
+
+<style lang="scss">
+.loading-indicator {
+  &--transitioned {
+    transition: all 0.25s;
+  }
+}
+</style>