fix grid client disconnecting while connecting

packages/playground/src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <v-app>
     <TfNavigationLoader />
+    <TfOfflineNotifier />
     <profile-manager-controller>
       <v-navigation-drawer
         width="280"
@@ -120,7 +121,7 @@
 
           <v-spacer>
             <div class="d-flex align-center justify-start">
-              <TftSwapPrice class="pr-4"></TftSwapPrice>
+              <TftSwapPrice class="pr-4" v-if="hasActiveProfile && hasGrid"></TftSwapPrice>
               <FundsCard v-if="hasActiveProfile"></FundsCard>
             </div>
           </v-spacer>
@@ -395,6 +396,7 @@ import ProfileManagerController from "./components/profile_manager_controller.vu
 import TftSwapPrice from "./components/swap_price.vue";
 import TFNotification from "./components/tf_notification.vue";
 import TfNavigationLoader from "./components/TfNavigationLoader.vue";
+import TfOfflineNotifier from "./components/TfOfflineNotifier.vue";
 import { useGrid } from "./stores";
 import ProfileManager from "./weblets/profile_manager.vue";
 
@@ -427,6 +429,7 @@ export default {
     FundsCard,
     ProfileManagerController,
     TfNavigationLoader,
+    TfOfflineNotifier,
   },
 };
 </script>

packages/playground/src/components/TfNavigationLoader.vue

@@ -15,12 +15,13 @@
 <script lang="ts">
 import { computed, ref, type StyleValue, watch } from "vue";
 
-import { useNavigationStatus } from "../hooks";
+import { useNavigationStatus, useOnline } from "../hooks";
 
 export default {
   name: "TfNavigationLoader",
   setup() {
     const navigationStatus = useNavigationStatus();
+    const online = useOnline();
 
     /**
      * loading value indicates scale at a wider domain to avoid floating issues
@@ -48,15 +49,15 @@ export default {
         interval = setInterval(() => {
           const value = Math.min(75, loadingValue.value + (3 + Math.round(Math.random() * 10)));
           loadingValue.value = value;
-          if (value === 75) {
+          if (value === 75 || !online.value) {
             clear();
           }
         }, 5_00);
       },
     );
 
     const style = computed<StyleValue>(() => {
-      if (navigationStatus.value === "Loading") {
+      if (navigationStatus.value === "Loading" && online.value) {
         return {
           opacity: 1,
           transition: loadingValue.value === 0 ? undefined : "transform 0.3s linear",
@@ -67,7 +68,7 @@ export default {
       return {
         opacity: 0,
         transition: "transform 0.3s linear, opacity 0.3s linear 0.6s",
-        transform: `scaleX(${navigationStatus.value === "Failed" ? 0 : 1})`,
+        transform: `scaleX(${navigationStatus.value === "Success" ? 1 : 0})`,
       };
     });
 

packages/playground/src/components/TfOfflineNotifier.vue

@@ -0,0 +1,85 @@
+<template>
+  <VDialog scrollable persistent min-width="400px" max-width="700px" :model-value="offline || failed">
+    <VCard>
+      <VCardTitle class="v-card-title font-weight-black text-center text-h5 bg-primary py-3" v-text="title" />
+      <VCardText class="text-center">
+        <VIcon icon="mdi-close-circle-outline" class="text-h3" color="error" v-if="failed" />
+        <VProgressCircular indeterminate size="40" width="5" color="info" v-else />
+
+        <p class="my-4" v-text="description" />
+      </VCardText>
+
+      <VCardActions class="d-flex justify-center mb-4" v-if="failed">
+        <VBtn prepend-icon="mdi-reload" variant="outlined" color="secondary" @click="reload">Reload Now</VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
+
+<script lang="ts">
+import { computed, ref, watch } from "vue";
+
+import { useOffline } from "../hooks";
+
+export default {
+  name: "TfOfflineNotifier",
+  setup() {
+    const offline = useOffline();
+    const dotCount = ref(0);
+    const failed = ref(false);
+
+    function reload() {
+      window.onbeforeunload = null;
+      window.location.reload();
+    }
+
+    let interval: ReturnType<typeof setInterval> | null = null;
+    watch(offline, offline => {
+      if (offline) {
+        if (failed.value) return;
+
+        dotCount.value = 0;
+        let time = 0;
+        interval = setInterval(() => {
+          time += 0.3;
+          dotCount.value = (dotCount.value + 1) % 4;
+
+          if (time >= 20) {
+            if (interval) {
+              clearInterval(interval);
+              interval = null;
+            }
+
+            failed.value = true;
+          }
+        }, 300);
+        return;
+      }
+
+      if (interval) {
+        clearInterval(interval);
+        interval = null;
+      }
+    });
+
+    const title = computed(() => {
+      if (failed.value) {
+        return `Failed to reconnect`;
+      }
+
+      return `Trying to reconnect${".".repeat(dotCount.value)}`;
+    });
+
+    const description = computed(() => {
+      if (failed.value) {
+        return `No internet connection detected. Please check your connection.`;
+      }
+
+      return `We're attempting to automatically reconnect you to dashboard. If your internet connection is ok. otherwise you
+          can reload instantly.`;
+    });
+
+    return { offline, failed, reload, dotCount, title, description };
+  },
+};
+</script>

packages/playground/src/hooks/index.ts

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

packages/playground/src/hooks/useOnline.ts

@@ -0,0 +1,32 @@
+import { computed, onMounted, onUnmounted, ref } from "vue";
+
+export function useOnline() {
+  const online = ref(true);
+
+  function setOnline(value: boolean) {
+    return () => {
+      online.value = value;
+    };
+  }
+
+  const isOnline = setOnline(true);
+  const isOffline = setOnline(false);
+
+  onMounted(() => {
+    window.addEventListener("online", isOnline);
+    window.addEventListener("offline", isOffline);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener("online", isOnline);
+    window.removeEventListener("offline", isOffline);
+  });
+
+  return online;
+}
+
+export function useOffline() {
+  const online = useOnline();
+
+  return computed(() => !online.value);
+}

packages/playground/src/weblets/profile_manager.vue

@@ -441,6 +441,7 @@ import { generateKeyPair } from "web-ssh-keygen";
 import { AppThemeSelection } from "@/utils/app_theme";
 
 import { useProfileManagerController } from "../components/profile_manager_controller.vue";
+import { useOnline } from "../hooks";
 import { useInputRef } from "../hooks/input_validator";
 import { useProfileManager } from "../stores";
 import {
@@ -473,23 +474,31 @@ const props = defineProps({
 });
 defineEmits<{ (event: "update:modelValue", value: boolean): void }>();
 
+const online = useOnline();
 watch(
-  () => props.modelValue,
-  m => {
-    if (m) {
-      nextTick().then(mounted);
-    } else {
-      nextTick().then(() => {
-        if (isStoredCredentials()) {
-          activeTab.value = 0;
-        } else {
-          activeTab.value = 1;
-        }
-        clearFields();
-      });
+  () => [online.value, props.modelValue],
+  ([online, m], [wasOnline]) => {
+    if (!wasOnline && online) {
+      handleModelValue(true);
     }
+
+    handleModelValue(online && m);
   },
 );
+function handleModelValue(m: boolean) {
+  if (m) {
+    nextTick().then(mounted);
+  } else {
+    nextTick().then(() => {
+      if (isStoredCredentials()) {
+        activeTab.value = 0;
+      } else {
+        activeTab.value = 1;
+      }
+      clearFields();
+    });
+  }
+}
 watch(
   () => keypairType.value,
   async (value, oldValue) => {