Merge pull request #109 from Moros1138/better-preload

Better preload
Moros1138 · Jun 26, 2024 · 8bda708 · 8bda708
2 parents f74dd8b + 6530856
commit 8bda708
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 55 deletions.
diff --git a/resources/css/app.scss b/resources/css/app.scss
@@ -124,7 +124,7 @@ a:focus {
     display: flex !important;
 }
 
-.hidden { display: none; }
+.hidden { display: none !important; }
 
 .lm_content {
     overflow: visible !important;

diff --git a/resources/css/app/loading.scss b/resources/css/app/loading.scss
@@ -1,5 +1,5 @@
 #pgetinker-loading {
-    display: none;
+    display: flex;
     position: absolute;
     top: 49px;
     bottom: 0;

diff --git a/resources/js/app-preload.ts b/resources/js/app-preload.ts
@@ -0,0 +1,44 @@
+import { conformStorage, getStorageValue, setStorageValue, removeStorageKey } from './lib/storage';
+import './lib/lucide';
+
+// @ts-ignore
+import agreeDialog from './lib/agreeDialog';
+
+conformStorage();
+
+const preloader = () =>
+{
+    import("./app.ts")
+        .then((object) =>
+        {
+            const PGEtinker = object.default;
+
+            new PGEtinker();
+        })
+        .catch((reason) =>
+        {
+            console.log(reason);
+        });
+};
+
+if(!getStorageValue("agreed-to-terms"))
+{
+    agreeDialog()
+        .then(() =>
+        {
+            setStorageValue("agreed-to-terms", true);
+            preloader();
+        })
+        .catch(() =>
+        {
+            removeStorageKey("code");
+            removeStorageKey("theme");
+            removeStorageKey("layout");
+            removeStorageKey("version");
+            window.location.pathname = "/disagree";
+        });
+}
+else
+{
+    preloader();
+}
diff --git a/resources/js/app.ts b/resources/js/app.ts
@@ -1,11 +1,9 @@
 import './lib/bootstrap';
-import { conformStorage, getStorageValue, setStorageValue, removeStorageKey } from './lib/storage';
+import { getStorageValue, setStorageValue } from './lib/storage';
 import './lib/goldenLayout';
-import './lib/lucide';
+
 import version from "./lib/version";
 // @ts-ignore
-import agreeDialog from './lib/agreeDialog';
-// @ts-ignore
 import mobileMenuDialog from './lib/mobileMenuDialog';
 // @ts-ignore
 import newsDialog from './lib/newsDialog';
@@ -34,7 +32,7 @@ import { createToast, ToastType } from './lib/createToast';
 
 declare function GoldenLayout(...args: any[]): void;
 
-class PGEtinker
+export default class PGEtinker
 {
     consolePanel;
     editorPanel;
@@ -51,7 +49,6 @@ class PGEtinker
 
     constructor()
     {
-        conformStorage();
 
         this.consolePanel        = new ConsolePanel(this);
         this.compilerOutputPanel = new CompilerOutputPanel(this);
@@ -150,29 +147,9 @@ class PGEtinker
             newsDialog();
         });
 
-        if(!getStorageValue("agreed-to-terms"))
-        {
-            agreeDialog()
-                .then(() =>
-                {
-                    setStorageValue("agreed-to-terms", true);
-                    this.SetupLayout();
-                })
-                .catch(() =>
-                {
-                    removeStorageKey("code");
-                    removeStorageKey("theme");
-                    removeStorageKey("layout");
-                    removeStorageKey("version");
-                    window.location.pathname = "/disagree";
-                });
-        }
-        else
-        {
-            this.SetupLayout();
-            this.setActiveTab("editor");
-            this.setActiveTab("problems");
-        }
+        this.SetupLayout();
+        this.setActiveTab("editor");
+        this.setActiveTab("problems");
     }
 
     setActiveTab(id: string)
@@ -397,7 +374,7 @@ class PGEtinker
 
     async SetupLayout()
     {
-        document.querySelector("#pgetinker-loading")!.classList.toggle("display-flex", true);
+        document.querySelector("#pgetinker-loading")!.classList.toggle("hidden", false);
 
         await this.editorPanel.onPreInit();
 
@@ -417,7 +394,6 @@ class PGEtinker
                 setStorageValue("layout", this.layout.toConfig());
             }
         });
-
         this.layout.on("initialised", async() =>
         {
             this.layoutInitialized = true;
@@ -436,7 +412,6 @@ class PGEtinker
 
             setTimeout(() =>
             {
-                document.querySelector("#pgetinker-loading")!.classList.toggle("display-flex", false);
                 this.setActiveTab("editor");
             }, 500)
         });
@@ -462,23 +437,40 @@ class PGEtinker
         // update editor theme
         await this.editorPanel.updateConfiguration();
 
-        setTimeout(() =>
+        // 
+        const isVsCodeTheme = () =>
         {
-            document.body.classList.toggle("dark", !light);
-            document.body.classList.toggle("light", light);
-
-            // update golden layout theme
-            let goldenLayoutDarkThemeStyle = document.querySelector("#goldenlayout-dark-theme")! as HTMLLinkElement;
-            let goldenLayoutLightThemeStyle = document.querySelector("#goldenlayout-light-theme")! as HTMLLinkElement;
+            return document.body.classList.contains(`vscode-theme-defaults-themes-${theme}_modern-json`);
+        }
 
-            goldenLayoutDarkThemeStyle.disabled = light;
-            goldenLayoutLightThemeStyle.disabled = !light;
+        let updateInterval : NodeJS.Timeout;
+
+        const updatehandler = () =>
+        {
+            if(isVsCodeTheme())
+            {
+                clearInterval(updateInterval);
+
+                document.body.classList.toggle("dark", !light);
+                document.body.classList.toggle("light", light);
 
-            // update player theme
-            this.playerPanel.setTheme(theme);
-        }, 200);
+                // update golden layout theme
+                let goldenLayoutDarkThemeStyle = document.querySelector("#goldenlayout-dark-theme")! as HTMLLinkElement;
+                let goldenLayoutLightThemeStyle = document.querySelector("#goldenlayout-light-theme")! as HTMLLinkElement;
+
+                goldenLayoutDarkThemeStyle.disabled = light;
+                goldenLayoutLightThemeStyle.disabled = !light;
+
+                // update player theme
+                this.playerPanel.setTheme(theme);
+
+                document.querySelector("#pgetinker-loading")!.classList.toggle("hidden", true);
+                return;
+            }
+
+        }
 
+        updateInterval = setInterval(updatehandler, 50);
     }
 }
 
-new PGEtinker();
diff --git a/resources/js/components/EditorPanel.js b/resources/js/components/EditorPanel.js
@@ -123,6 +123,7 @@ export default class EditorPanel
         if(this.autoConnect)
         {
             this.reconnectInterval = setInterval(reconnectHandler, 5000);
+            reconnectHandler();
         }
 
         this.monacoWrapper.getEditor().setValue(code);

diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
@@ -37,7 +37,7 @@
 
     <link rel="stylesheet" type="text/css" href="{{ Vite::asset('resources/css/normalize.scss')}}">
     <link rel="stylesheet" type="text/css" href="{{ Vite::asset('resources/css/app.scss')}}">
-    @vite('resources/js/app.ts')
+    @vite('resources/js/app-preload.ts')
 </head>
 <body>
     <div id="app">

diff --git a/tests/Browser/BrowserTest.php b/tests/Browser/BrowserTest.php
@@ -41,7 +41,8 @@ public function testAgreeRevealsTheApplication(): void
 
             $browser->click("#i-agree");
 
-            $browser->waitUntilMissing("#pgetinker-loading");
+            $browser->waitUntilMissing("#pgetinker-loading", 10);
+            $browser->assertMissing("#pgetinker-loading");
 
             $browser->assertSee("News and Updates");
         });
@@ -52,7 +53,8 @@ public function testDismissesNewsAndUpdates(): void
         $this->browse(function(Browser $browser)
         {
             $browser->visit("/");
-            $browser->waitUntilMissing("#pgetinker-loading");
+            $browser->waitUntilMissing("#pgetinker-loading", 10);
+            $browser->assertMissing("#pgetinker-loading");
 
             $browser->click(".footer .ok");
             $browser->waitUntilMissing(".dialog");
@@ -66,7 +68,8 @@ public function testLoadsDefaultCodeOnClick(): void
         $this->browse(function(Browser $browser)
         {
             $browser->visit("/");
-            $browser->waitUntilMissing("#pgetinker-loading");
+            $browser->waitUntilMissing("#pgetinker-loading", 10);
+            $browser->assertMissing("#pgetinker-loading");
 
             $browser->click("@settings-menu");
 
@@ -86,7 +89,8 @@ public function testSelectsLightTheme(): void
         $this->browse(function(Browser $browser)
         {
             $browser->visit("/");
-            $browser->waitUntilMissing("#pgetinker-loading");
+            $browser->waitUntilMissing("#pgetinker-loading", 10);
+            $browser->assertMissing("#pgetinker-loading");
 
             $browser->click("@settings-menu");
 
@@ -107,7 +111,8 @@ public function testCompilesOnClick(): void
         $this->browse(function(Browser $browser)
         {
             $browser->visit("/");
-            $browser->waitUntilMissing("#pgetinker-loading");
+            $browser->waitUntilMissing("#pgetinker-loading", 10);
+            $browser->assertMissing("#pgetinker-loading");
 
             $browser->click("#start-stop");
             $browser->waitFor("#player-panel .iframe-container iframe", 10);
@@ -120,14 +125,19 @@ public function testSharesOnClick(): void
         $this->browse(function(Browser $browser)
         {
             $browser->visit("/");
-            $browser->waitUntilMissing("#pgetinker-loading");
+            $browser->waitUntilMissing("#pgetinker-loading", 10);
+            $browser->assertMissing("#pgetinker-loading");
 
             $browser->mouseover("@sharing-menu");
             $browser->click("#share");
             $browser->waitFor(".share-dialog");
 
             $shareUrl = $browser->value("#share-url");
             $browser->visit($shareUrl);
+
+            $browser->waitUntilMissing("#pgetinker-loading", 10);
+            $browser->assertMissing("#pgetinker-loading");
+
             $browser->assertSee("C++ Editor");
         });
     }

diff --git a/vite.config.ts b/vite.config.ts
@@ -29,7 +29,7 @@ export default defineConfig({
                 'resources/css/disagreed.scss',
                 'resources/js/disagreed.js',
                 'resources/css/app.scss',
-                'resources/js/app.ts'
+                'resources/js/app-preload.ts'
             ],
             refresh: true,
         }),