From 1574e4418a746cc31c3e71fdea45bdaf92fc6f1d Mon Sep 17 00:00:00 2001
From: butschster <butschster@gmail.com>
Date: Mon, 6 May 2024 10:49:14 +0400
Subject: [PATCH] Adds page preloader

---
 spa/app/plugins/centrifugo.ts |  5 +++--
 spa/layouts/default.vue       | 22 ++++++++++++++++++----
 spa/package-lock.json         | 12 ++++++++++++
 spa/package.json              |  1 +
 spa/stores/app.ts             |  9 +++++++++
 5 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/spa/app/plugins/centrifugo.ts b/spa/app/plugins/centrifugo.ts
index f451011..c9cce19 100644
--- a/spa/app/plugins/centrifugo.ts
+++ b/spa/app/plugins/centrifugo.ts
@@ -12,15 +12,16 @@ const guessWsConnection = (): string => {
 export default defineNuxtPlugin(async (nuxtApp) => {
     const config = useRuntimeConfig()
     const ws_url: string = (config.public.ws_url) || guessWsConnection()
+    const store = useAppStore();
 
     const client: WsClient = new WsClient(
         new Centrifuge(ws_url),
         nuxtApp.$logger
     )
 
-    await client.connect()
+    await store.init(client)
 
-    nuxtApp.hook('app:created', () => {
+    nuxtApp.hook('app:created', (): void => {
         const settings = useAppStore()
         settings.fetch()
 
diff --git a/spa/layouts/default.vue b/spa/layouts/default.vue
index 14b8a8d..20672d2 100644
--- a/spa/layouts/default.vue
+++ b/spa/layouts/default.vue
@@ -1,9 +1,17 @@
 <template>
   <div class="main-layout">
-    <Navbar />
-    <slot />
+    <Navbar/>
+    <slot/>
   </div>
-  <WidgetContainerModal />
+  <WidgetContainerModal/>
+  <VuePreloader
+    v-if="showPreloader"
+    background-color="#111827"
+    color="#ffffff"
+    transition-type="fade-down"
+    :loading-speed="20"
+    :transition-speed="500"
+  />
 </template>
 
 <style lang="scss" scoped>
@@ -13,6 +21,12 @@
 </style>
 
 <script setup lang="ts">
-import {container as WidgetContainerModal} from "jenesius-vue-modal";
+import { container as WidgetContainerModal } from "jenesius-vue-modal";
 import Navbar from "~/layouts/_components/Navbar.vue";
+import { VuePreloader } from 'vue-preloader';
+import '../node_modules/vue-preloader/dist/style.css'
+import { useAppStore } from "~/stores/app";
+
+const store = useAppStore();
+const showPreloader = computed(() => store.loading);
 </script>
\ No newline at end of file
diff --git a/spa/package-lock.json b/spa/package-lock.json
index 4059fef..f887601 100644
--- a/spa/package-lock.json
+++ b/spa/package-lock.json
@@ -17,6 +17,7 @@
         "pinia": "^2.1",
         "vue": "^3.4.21",
         "vue-animated-counter": "^0.3.0",
+        "vue-preloader": "^1.1.4",
         "vue-router": "^4.3.0",
         "youtube-vue3": "^0.1.15"
       },
@@ -11999,6 +12000,17 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vue-preloader": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/vue-preloader/-/vue-preloader-1.1.4.tgz",
+      "integrity": "sha512-XvBS4rzhPDJ/Ya+FOMVfkMK4maZuEn6/CED/Y94NTJiKnU/ASikixB2dYGgHfYhosRPdAVXIZJfetWnPbHgdJA==",
+      "dependencies": {
+        "vue": "^3.3.4"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/vue-resize": {
       "version": "2.0.0-alpha.1",
       "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
diff --git a/spa/package.json b/spa/package.json
index bafa7c3..00056d5 100644
--- a/spa/package.json
+++ b/spa/package.json
@@ -20,6 +20,7 @@
     "pinia": "^2.1",
     "vue": "^3.4.21",
     "vue-animated-counter": "^0.3.0",
+    "vue-preloader": "^1.1.4",
     "vue-router": "^4.3.0",
     "youtube-vue3": "^0.1.15"
   },
diff --git a/spa/stores/app.ts b/spa/stores/app.ts
index 0b68869..fca3b34 100644
--- a/spa/stores/app.ts
+++ b/spa/stores/app.ts
@@ -1,8 +1,10 @@
 import type { AppState, WsEvent } from "~/config/types";
 import JSConfetti from "js-confetti";
+import { WsClient } from "~/app/ws/client";
 
 export const useAppStore = defineStore('appStore', {
     state: (): AppState => ({
+        loading: true,
         github: {
             server: {
                 stars: 0,
@@ -16,6 +18,13 @@ export const useAppStore = defineStore('appStore', {
         buggregator_url: ''
     }),
     actions: {
+        async init(client: WsClient): void {
+            this.loading = true
+
+            await client.connect()
+
+            this.loading = false
+        },
         async fetch(): Promise<void> {
             const nuxt: NuxtApp = useNuxtApp()
             const result = await nuxt.$api.settings.get()