Merge pull request #68 from Freegle/bugfix/page-transition-loader

Bugfix/page transition loader

.eslintrc.js

@@ -55,6 +55,7 @@ module.exports = {
     useLazyAsyncData: 'readonly',
     createApp: 'readonly',
     useNuxtApp: 'readonly',
+    useLoadingIndicator: 'readonly',
     useHead: 'readonly',
     useRouter: 'readonly',
     ref: 'readonly',

app.vue

@@ -5,10 +5,24 @@
         <NavbarDesktop />
         <NavbarMobile />
       </header>
+      <div class="position-absolute top-50 start-50 translate-middle z-3">
+        <LoadingIndicator
+          with-transition
+          :throttle="loadingIndicatorThrottle"
+        />
+      </div>
     </client-only>
-    <NuxtLayout v-if="ready">
-      <NuxtPage />
-    </NuxtLayout>
+    <div
+      v-if="ready"
+      class="nuxt-layout-wrapper"
+      :style="{
+        filter: isLoading ? 'blur(1rem)' : 'unset',
+      }"
+    >
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </div>
   </div>
 </template>
 <script setup>
@@ -48,7 +62,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
 
@@ -208,6 +225,11 @@ if (process.client) {
     },
   })
 }
-
 ready = true
 </script>
+
+<style lang="scss">
+.nuxt-layout-wrapper {
+  transition: all 0.25s;
+}
+</style>

components/LoadingIndicator.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    class="loading-indicator"
+    :style="{ opacity: isLoading ? 1 : 0 }"
+    :class="{ 'loading-indicator--transitioned': withTransition }"
+  >
+    <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,
+  },
+  withTransition: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const { isLoading } = useLoadingIndicator({
+  throttle: props.throttle,
+})
+</script>
+
+<style lang="scss">
+.loading-indicator {
+  &--transitioned {
+    transition: all 0.25s;
+  }
+}
+</style>