Adds page preloader

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

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>

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

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