Merge pull request #3475 from threefoldtech/development_fix_lazy_play…

…ground

Fix contracts page not working with lazy loading

packages/playground/public/loader/loader.js

@@ -90,3 +90,8 @@ function createElement([serviceName, serviceStatus]) {
     serviceStatus !== null ? "reachable" : "unreachable"
   }">${serviceStatus !== null ? "&#10003;" : "&#10007;"}</p></div></li>`;
 }
+
+/** @type { () => void } */
+let _unlockMonitorLock;
+window.$$monitorLock = new Promise(res => (_unlockMonitorLock = res));
+window.$$releaseMonitorLock = () => _unlockMonitorLock();

packages/playground/src/App.vue

@@ -273,7 +273,7 @@ const profileManager = useProfileManager();
 const gridStore = useGrid();
 const network = process.env.NETWORK || (window as any).env.NETWORK;
 const toolbarExtended = ref(false);
-const openProfile = ref(true);
+const openProfile = ref(false);
 const hasActiveProfile = computed(() => !!profileManager.profile);
 const theme = useTheme();
 const navbarConfig = ref();

packages/playground/src/Monitor.vue

@@ -8,6 +8,7 @@
 import { defineAsyncComponent, onMounted, ref } from "vue";
 
 import { setGlobalEnv } from "./config";
+
 export default {
   name: "AppMonitor",
   components: {
@@ -17,8 +18,8 @@ export default {
     const loadingApp = ref(true);
     onMounted(async () => {
       if (await setGlobalEnv()) {
+        window.$$releaseMonitorLock();
         /* Load d-tabs before app */
-        await import("./components/dynamic_tabs.vue");
         loadingApp.value = false;
       }
     });

packages/playground/src/components/logger.vue

@@ -203,7 +203,7 @@ export default {
     let _interceptorQueue: LI[] = [];
 
     async function interceptMessage(instance: LI) {
-      if (connectDB.value.error) {
+      if (connectDB?.value?.error) {
         _interceptorQueue.push(instance);
         return;
       }
@@ -212,7 +212,19 @@ export default {
       const { logger: _, date: __, ...log } = instance;
 
       if (import.meta.env.DEV) {
-        if (log.messages.map(String).join().includes("vite") && log.type === "debug") {
+        if (
+          log.messages
+            .map(v => {
+              try {
+                return String(v);
+              } catch {
+                return "{ [[null proto]] }";
+              }
+            })
+            .join()
+            .includes("vite") &&
+          log.type === "debug"
+        ) {
           return;
         }
       }

packages/playground/src/config.ts

@@ -10,30 +10,21 @@ import {
 import { marked } from "marked";
 import { type App, type Component, defineAsyncComponent } from "vue";
 
-import CopyInputWrapper from "./components/copy_input_wrapper.vue";
-import Filters from "./components/filter.vue";
-import FormValidator from "./components/form_validator.vue";
-import InputTooltip from "./components/input_tooltip.vue";
-import InputValidator from "./components/input_validator.vue";
-import TfSelectCountry from "./components/node_selector/select_location_internals/TfSelectCountry.vue";
-import TfSelectRegion from "./components/node_selector/select_location_internals/TfSelectRegion.vue";
-import PasswordInputWrapper from "./components/password_input_wrapper.vue";
-import ViewLayout from "./components/view_layout.vue";
 import * as validators from "./utils/validators";
 
 const GLOBAL_COMPONENTS: { [key: string]: Component } = {
-  PasswordInputWrapper,
+  PasswordInputWrapper: defineAsyncComponent(() => import("./components/password_input_wrapper.vue")),
   WebletLayout: defineAsyncComponent(() => import("./components/weblet_layout.vue")),
-  CopyInputWrapper,
+  CopyInputWrapper: defineAsyncComponent(() => import("./components/copy_input_wrapper.vue")),
   DTabs: defineAsyncComponent(() => import("./components/dynamic_tabs.vue")),
-  InputValidator,
-  FormValidator,
-  ViewLayout,
-  InputTooltip,
-  Filters,
+  InputValidator: defineAsyncComponent(() => import("./components/input_validator.vue")),
+  FormValidator: defineAsyncComponent(() => import("./components/form_validator.vue")),
+  ViewLayout: defineAsyncComponent(() => import("./components/view_layout.vue")),
+  InputTooltip: defineAsyncComponent(() => import("./components/input_tooltip.vue")),
+  Filters: defineAsyncComponent(() => import("./components/filter.vue")),
   TfSelectionDetails: defineAsyncComponent(() => import("./components/node_selector/TfSelectionDetails.vue")),
-  TfSelectRegion,
-  TfSelectCountry,
+  TfSelectRegion: defineAsyncComponent(() => import("./components/node_selector/select_location_internals/TfSelectRegion.vue")), // prettier-ignore
+  TfSelectCountry: defineAsyncComponent(() => import("./components/node_selector/select_location_internals/TfSelectCountry.vue")), // prettier-ignore
 };
 
 export function defineGlobals(app: App<Element>): void {
@@ -75,6 +66,7 @@ function defineGlobalProps(app: App<Element>) {
   app.config.globalProperties.validators = validators;
   app.config.globalProperties.MANUAL_URL = window.env.MANUAL_URL;
 }
+
 /**
  * Configures global environment variables based on available service URLs.
  *

packages/playground/src/global-components.d.ts

@@ -39,6 +39,8 @@ declare global {
   interface Window {
     $$appLoader: () => Promise<void>;
     $$showMonitorError: (urls: { [key: string]: string | null }) => void;
+    $$monitorLock: Promise<void>;
+    $$releaseMonitorLock(): void;
     env: {
       GRAPHQL_STACKS: string[];
       GRIDPROXY_STACKS: string[];

packages/playground/src/router/index.ts

@@ -806,4 +806,11 @@ const router = createRouter({
   routes: mainRoutes,
 });
 
+/* Guard to verify monitor is completed */
+const removeMonitorGuard = router.beforeEach(async (_, __, next) => {
+  await window.$$monitorLock;
+  removeMonitorGuard();
+  return next();
+});
+
 export default router;

packages/playground/src/utils/validators.ts

@@ -6,8 +6,6 @@ import type { IsEmailOptions } from "validator/lib/isEmail";
 import type { IsFQDNOptions } from "validator/lib/isFQDN";
 import type { IsURLOptions } from "validator/lib/isURL";
 
-import type { RuleReturn } from "@/components/input_validator.vue";
-
 import { SessionStorageSettingsKey } from "./settings";
 
 /**
@@ -777,7 +775,9 @@ export function isValidDecimalNumber(length: number, msg: string) {
     }
   };
 }
-export async function isValidStellarAddress(target: string): Promise<RuleReturn> {
+export async function isValidStellarAddress(
+  target: string,
+): Promise<import("@/components/input_validator.vue").RuleReturn> {
   const server = new StellarSdk.Server(window.env.STELLAR_HORIZON_URL);
   try {
     // check if the account provided exists on stellar