feat: support loading

main/index.ts

@@ -9,12 +9,16 @@ const WINDOWS: Record<string, BrowserWindow | null> = {
 function mainWin() {
   WINDOWS.main = new BrowserWindow({
     title: 'Main window',
+    webPreferences: {
+      preload: join(__dirname, '../preload/index.main')
+    },
   })
 
   if (app.isPackaged) {
     WINDOWS.main.loadFile(join(__dirname, '../react-ts/index.html'))
   } else {
     WINDOWS.main.loadURL(`http://127.0.0.1:${process.env.PORT}`)
+    WINDOWS.main.maximize()
   }
 
 }

preload/index.main.ts

@@ -1 +1,25 @@
-console.log('index.main.ts')
+import fs from 'fs'
+import path from 'path'
+import { contextBridge, ipcRenderer } from 'electron'
+import { domReady } from './utils'
+import { useLoading } from './loading'
+
+const { appendLoading, removeLoading } = useLoading()
+
+
+; (async () => {
+  await domReady()
+
+  appendLoading()
+})();
+
+// ---------------------------------------------------
+
+contextBridge.exposeInMainWorld('bridge', {
+  __dirname,
+  __filename,
+  fs,
+  path,
+  ipcRenderer,
+  removeLoading,
+})

preload/loading.ts

@@ -0,0 +1,56 @@
+
+
+/**
+ * https://tobiasahlin.com/spinkit
+ * https://connoratherton.com/loaders
+ * https://projects.lukehaas.me/css-loaders
+ * https://matejkustec.github.io/SpinThatShit
+ */
+export function useLoading() {
+  const className = `loaders-css__square-spin`
+  const styleContent = `
+@keyframes square-spin {
+  25% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
+  50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
+  75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
+  100% { transform: perspective(100px) rotateX(0) rotateY(0); }
+}
+.${className} > div {
+  animation-fill-mode: both;
+  width: 50px;
+  height: 50px;
+  background: #fff;
+  animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
+}
+.app-loading-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #282c34;
+  z-index: 9;
+}
+    `
+  const oStyle = document.createElement('style')
+  const oDiv = document.createElement('div')
+
+  oStyle.id = 'app-loading-style'
+  oStyle.innerHTML = styleContent
+  oDiv.className = 'app-loading-wrap'
+  oDiv.innerHTML = `<div class="${className}"><div></div></div>`
+
+  return {
+    appendLoading() {
+      document.head.appendChild(oStyle)
+      document.body.appendChild(oDiv)
+    },
+    removeLoading() {
+      document.head.removeChild(oStyle)
+      document.body.removeChild(oDiv)
+    },
+  }
+}

preload/utils.ts

@@ -0,0 +1,15 @@
+
+/** docoment ready */
+export function domReady(condition: DocumentReadyState[] = ['complete', 'interactive']) {
+  return new Promise(resolve => {
+    if (condition.includes(document.readyState)) {
+      resolve(true)
+    } else {
+      document.addEventListener('readystatechange', () => {
+        if (condition.includes(document.readyState)) {
+          resolve(true)
+        }
+      })
+    }
+  })
+}

react-ts/src/main.tsx

@@ -7,5 +7,8 @@ ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById('root'),
+  () => {
+    window.bridge.removeLoading()
+  },
 )