feat(loading): adds loading bar service

Author: dvcol

src/components/AppComponent.vue

@@ -3,7 +3,6 @@ import { Transition } from 'vue';
 import { RouterView } from 'vue-router';
 
 import { NavbarComponent } from '~/components/common';
-
 import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
 
 const { isAuthenticated } = useAuthSettingsStoreRefs();
@@ -46,7 +45,6 @@ main {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: calc(100vh - 2.75rem);
   padding: 0 2rem;
 }
 

src/components/common/navbar/LoadingBarProvider.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { useLoadingBar } from 'naive-ui';
+
+import { LoadingBarService } from '~/services/loading-bar.service';
+
+const loadingBar = useLoadingBar();
+
+LoadingBarService.instance = loadingBar;
+</script>

src/components/web/ContainerComponent.ce.vue

@@ -1,21 +1,34 @@
 <script setup lang="ts">
-import { darkTheme, lightTheme, NConfigProvider } from 'naive-ui';
+import { darkTheme, lightTheme, NConfigProvider, NLoadingBarProvider } from 'naive-ui';
 
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
+import LoadingBarProvider from '~/components/common/navbar/LoadingBarProvider.vue';
 import { watchPreferDark } from '~/utils';
 import { lazyComponent } from '~/utils/lazy.utils';
 
 const AppComponent = lazyComponent(() => import('~/components/AppComponent.vue'));
 
 const isDark = watchPreferDark();
 const theme = computed(() => (isDark.value ? darkTheme : lightTheme));
+
+const root = ref<HTMLElement>();
 </script>
 
 <template>
-  <div id="trakt-extension-root">
+  <div id="trakt-extension-root" ref="root">
     <NConfigProvider :theme="theme" abstract>
-      <AppComponent />
+      <NLoadingBarProvider
+        :to="root"
+        :loading-bar-style="{
+          loading: {
+            '--n-color-loading': 'white',
+          },
+        }"
+      >
+        <AppComponent />
+        <LoadingBarProvider />
+      </NLoadingBarProvider>
     </NConfigProvider>
   </div>
 </template>

src/services/loading-bar.service.ts

@@ -0,0 +1,5 @@
+import type { useLoadingBar } from 'naive-ui';
+
+export class LoadingBarService {
+  static instance: ReturnType<typeof useLoadingBar>;
+}

src/services/trakt.service.ts

@@ -4,6 +4,7 @@ import type { TraktApiResponse } from '~/models/trakt/trakt-client.model';
 import type { SettingsAuth, UserSetting } from '~/models/trakt-service.model';
 import type { TvdbApiResponse } from '~/models/tvdb/tvdb-client.model';
 
+import { LoadingBarService } from '~/services/loading-bar.service';
 import { TmdbClient } from '~/services/tmdb-client/clients/tmdb-client';
 import { traktApi } from '~/services/trakt-client/api/trakt-api.endpoints';
 import { TraktClient } from '~/services/trakt-client/clients/trakt-client';
@@ -101,6 +102,17 @@ export class TraktService {
 
     this.traktClient.onCall(async call => {
       console.info('TraktClient.onCall', call);
+
+      const timeout = setTimeout(() => LoadingBarService.instance?.start(), 500);
+      try {
+        await call.query;
+        LoadingBarService.instance?.finish();
+      } catch (error) {
+        LoadingBarService.instance?.error();
+        throw error;
+      } finally {
+        clearTimeout(timeout);
+      }
     });
 
     this.tvdbClient.onAuthChange(async _auth => {