diff --git a/src/index.ts b/src/index.ts
index 5bb7138f..b0b8451f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -596,15 +596,25 @@ app.whenReady().then(async () => {
     if (is.dev() && process.env.ELECTRON_RENDERER_URL) {
       // HACK: to make vite work with electron renderer (supports hot reload)
       event.returnValue = [null, `
-        console.log('Loading vite from dev server');
-        const viteScript = document.createElement('script');
-        viteScript.type = 'module';
-        viteScript.src = '${process.env.ELECTRON_RENDERER_URL}/@vite/client';
-        const rendererScript = document.createElement('script');
-        rendererScript.type = 'module';
-        rendererScript.src = '${process.env.ELECTRON_RENDERER_URL}/renderer.ts';
-        document.body.appendChild(viteScript);
-        document.body.appendChild(rendererScript);
+        console.log('${LoggerPrefix}', 'Loading vite from dev server');
+        (async () => {
+          await new Promise((resolve) => {
+            if (document.readyState === 'loading') {
+              console.log('${LoggerPrefix}', 'Waiting for DOM to load');
+              document.addEventListener('DOMContentLoaded', () => resolve(), { once: true });
+            } else {
+              resolve();
+            }
+          });
+          const viteScript = document.createElement('script');
+          viteScript.type = 'module';
+          viteScript.src = '${process.env.ELECTRON_RENDERER_URL}/@vite/client';
+          const rendererScript = document.createElement('script');
+          rendererScript.type = 'module';
+          rendererScript.src = '${process.env.ELECTRON_RENDERER_URL}/renderer.ts';
+          document.body.appendChild(viteScript);
+          document.body.appendChild(rendererScript);
+        })();
         0
       `];
     } else {
diff --git a/src/renderer.ts b/src/renderer.ts
index 259d41a5..bfb1eae7 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -202,13 +202,11 @@ const main = async () => {
 const initObserver = async () => {
   // check document.documentElement is ready
   await new Promise<void>((resolve) => {
-    document.addEventListener(
-      'DOMContentLoaded',
-      () => {
-        resolve();
-      },
-      { once: true },
-    );
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => resolve(), { once: true });
+    } else {
+      resolve();
+    }
   });
 
   const observer = new MutationObserver(() => {