Merge pull request #1705 from threefoldtech/development_navigation_lo…

…ader

feat: add global navigation loader

packages/playground/src/App.vue

@@ -1,5 +1,6 @@
 <template>
   <v-app>
+    <TfNavigationLoader />
     <profile-manager-controller>
       <v-navigation-drawer
         width="280"
@@ -393,6 +394,7 @@ import FundsCard from "./components/funds_card.vue";
 import ProfileManagerController from "./components/profile_manager_controller.vue";
 import TftSwapPrice from "./components/swap_price.vue";
 import TFNotification from "./components/tf_notification.vue";
+import TfNavigationLoader from "./components/TfNavigationLoader.vue";
 import { useGrid } from "./stores";
 import ProfileManager from "./weblets/profile_manager.vue";
 
@@ -424,6 +426,7 @@ export default {
     TftSwapPrice,
     FundsCard,
     ProfileManagerController,
+    TfNavigationLoader,
   },
 };
 </script>

packages/playground/src/components/TfNavigationLoader.vue

@@ -0,0 +1,77 @@
+<template>
+  <div
+    class="position-fixed top w-100 left bg-primary"
+    :style="[
+      {
+        height: '2px',
+        zIndex: 99999999,
+        transformOrigin: 'left center',
+      },
+      style,
+    ]"
+  />
+</template>
+
+<script lang="ts">
+import { computed, ref, type StyleValue, watch } from "vue";
+
+import { useNavigationStatus } from "../hooks";
+
+export default {
+  name: "TfNavigationLoader",
+  setup() {
+    const navigationStatus = useNavigationStatus();
+
+    /**
+     * loading value indicates scale at a wider domain to avoid floating issues
+     * scale: 0 -> 1
+     * value: 0 -> 100
+     */
+    const loadingValue = ref(0);
+
+    let interval: ReturnType<typeof setInterval> | null = null;
+    function clear() {
+      interval !== null && clearInterval(interval);
+      interval = null;
+    }
+
+    watch(
+      () => navigationStatus.value === "Loading",
+      async loading => {
+        clear();
+
+        if (!loading) {
+          return;
+        }
+
+        loadingValue.value = 0;
+        interval = setInterval(() => {
+          const value = Math.min(75, loadingValue.value + (3 + Math.round(Math.random() * 10)));
+          loadingValue.value = value;
+          if (value === 75) {
+            clear();
+          }
+        }, 5_00);
+      },
+    );
+
+    const style = computed<StyleValue>(() => {
+      if (navigationStatus.value === "Loading") {
+        return {
+          opacity: 1,
+          transition: loadingValue.value === 0 ? undefined : "transform 0.3s linear",
+          transform: `scaleX(${loadingValue.value / 100})`,
+        };
+      }
+
+      return {
+        opacity: 0,
+        transition: "transform 0.3s linear, opacity 0.3s linear 0.6s",
+        transform: `scaleX(${navigationStatus.value === "Failed" ? 0 : 1})`,
+      };
+    });
+
+    return { loadingValue, style };
+  },
+};
+</script>

packages/playground/src/hooks/index.ts

@@ -1 +1,3 @@
 export * from "./use_password_input";
+
+export * from "./useNavigationStatus";

packages/playground/src/hooks/useNavigationStatus.ts

@@ -0,0 +1,39 @@
+import noop from "lodash/fp/noop.js";
+import { onMounted, onUnmounted, ref } from "vue";
+import { useRouter } from "vue-router";
+
+export function useNavigationStatus() {
+  const router = useRouter();
+  const status = ref<"Loading" | "Success" | "Failed">("Success");
+
+  let unSubscribeBeforeEach = noop;
+  let unSubscribeAfterEach = noop;
+
+  let currentToPath: string;
+
+  onMounted(async () => {
+    await router.isReady();
+
+    unSubscribeBeforeEach = router.beforeEach((to, _, next) => {
+      currentToPath = to.fullPath;
+      status.value = "Loading";
+
+      return next();
+    });
+
+    unSubscribeAfterEach = router.afterEach((to, _, failure) => {
+      if (status.value !== "Loading" || currentToPath !== to.fullPath) {
+        return;
+      }
+
+      status.value = failure ? "Failed" : "Success";
+    });
+  });
+
+  onUnmounted(() => {
+    unSubscribeBeforeEach();
+    unSubscribeAfterEach();
+  });
+
+  return status;
+}