fix safari load breakage

zardoy · Feb 8, 2024 · ca08e73 · ca08e73
1 parent 83b76ea
commit ca08e73
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 34 deletions.
diff --git a/index.html b/index.html
@@ -4,37 +4,41 @@
     <script>
       window.startLoad = Date.now()
     </script>
-    <script type="module" async>
-      const checkLoadEruda = () => {
-        if (window.location.hash === '#dev') {
-          // todo precache (check offline)?
-          import('https://cdn.skypack.dev/eruda').then(({ default: eruda }) => {
-            eruda.init()
-          })
+      <script async>
+        const loadingDiv = `
+        <div class="initial-loader" style="position: fixed;transition:opacity 0.2s;inset: 0;background:black;display: flex;justify-content: center;align-items: center;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;gap: 15px;" ontransitionend="this.remove()">
+      <div>
+          <img src="./loading-bg.jpg" alt="Prismarine Web Client" style="position:fixed;inset:0;width:100%;height:100%;z-index: -2;object-fit: cover;filter: blur(3px);">
+          <div style="position: fixed;inset: 0;z-index: -1;background-color: rgba(0, 0, 0, 0.8);"></div>
+      </div>
+      <div>
+          <div style="font-size: calc(var(--font-size) * 1.8);color: lightgray;">Loading...</div>
+          <div style="font-size: var(--font-size);color: rgb(176, 176, 176);">A true Minecraft client in your browser!</div>
+      </div>
+  </div>
+  `
+        const loadingDivElem = document.createElement('div')
+        loadingDivElem.innerHTML = loadingDiv
+        if (!window.pageLoaded) {
+          document.documentElement.appendChild(loadingDivElem)
         }
-      }
-      checkLoadEruda()
-      window.addEventListener('hashchange', (e) => {
-        setTimeout(() => {
-          checkLoadEruda()
+      </script>
+      <script type="module" async>
+        const checkLoadEruda = () => {
+          if (window.location.hash === '#dev') {
+            // todo precache (check offline)?
+            import('https://cdn.skypack.dev/eruda').then(({ default: eruda }) => {
+              eruda.init()
+            })
+          }
+        }
+        checkLoadEruda()
+        window.addEventListener('hashchange', (e) => {
+          setTimeout(() => {
+            checkLoadEruda()
+          })
         })
-      })
-      const loadingDiv = `
-      <div class="initial-loader" style="position: fixed;transition:opacity 0.2s;inset: 0;background:black;display: flex;justify-content: center;align-items: center;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;gap: 15px;" ontransitionend="this.remove()">
-    <div>
-        <img src="./loading-bg.jpg" alt="Prismarine Web Client" style="position:fixed;inset:0;width:100%;height:100%;z-index: -2;object-fit: cover;filter: blur(3px);">
-        <div style="position: fixed;inset: 0;z-index: -1;background-color: rgba(0, 0, 0, 0.8);"></div>
-    </div>
-    <div>
-        <div style="font-size: calc(var(--font-size) * 1.8);color: lightgray;">Loading...</div>
-        <div style="font-size: var(--font-size);color: rgb(176, 176, 176);">A true Minecraft client in your browser!</div>
-    </div>
-</div>
-`
-      const loadingDivElem = document.createElement('div')
-      loadingDivElem.innerHTML = loadingDiv
-      document.documentElement.appendChild(loadingDivElem)
-    </script>
+      </script>
     <style>
       html {
         background: black;

diff --git a/server.js b/server.js
@@ -60,7 +60,7 @@ const server = isProd ?
       }
       if (netInterface) {
         const address = netInterface.ip4
-        console.log(`You can access the server on http://localhost:8080 or http://${address}:${port}`)
+        console.log(`You can access the server on http://localhost:${port} or http://${address}:${port}`)
       }
     }
   })

diff --git a/src/index.ts b/src/index.ts
@@ -801,10 +801,7 @@ void window.fetch('config.json').then(async res => res.json()).then(c => c, (err
   return {}
 }).then((config) => {
   miscUiState.appConfig = config
-});
-
-// eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
-(document.querySelector('.initial-loader') as HTMLElement).style.opacity = '0'
+})
 
 downloadAndOpenFile().then((downloadAction) => {
   if (downloadAction) return
@@ -831,3 +828,10 @@ downloadAndOpenFile().then((downloadAction) => {
   console.error(err)
   alert(`Failed to download file: ${err}`)
 })
+
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+const initialLoader = document.querySelector('.initial-loader') as HTMLElement | null
+if (initialLoader) {
+  initialLoader.style.opacity = '0'
+  window.pageLoaded = true
+}