import { ipcRenderer } from "electron"; 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); } }); } }); } const safeDOM = { append(parent: HTMLElement, child: HTMLElement) { if (!Array.from(parent.children).find((e) => e === child)) { return parent.appendChild(child); } }, remove(parent: HTMLElement, child: HTMLElement) { if (Array.from(parent.children).find((e) => e === child)) { return parent.removeChild(child); } }, }; /** * https://tobiasahlin.com/spinkit * https://connoratherton.com/loaders * https://projects.lukehaas.me/css-loaders * https://matejkustec.github.io/SpinThatShit */ function useLoading() { const className = `loaders-css__square-spin`; const styleContent = ` @keyframes square-spin { 0% { transform: rotate(0deg); background-image: url('icon_cube_border.png'); /* Replace with the URL of your image */ background-size: cover; /* Scale the image to cover the entire container */ } 25% { transform: perspective(100px) rotateX(180deg) rotateY(0); background-image: url('icon_cube_border.png'); /* Replace with the URL of your image */ background-size: cover; /* Scale the image to cover the entire container */ } 50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); background-image: url('icon_cube_border.png'); /* Replace with the URL of your image */ background-size: cover; /* Scale the image to cover the entire container */ } 75% { transform: perspective(100px) rotateX(0) rotateY(180deg); background-image: url('icon_cube_border.png'); /* Replace with the URL of your image */ background-size: cover; /* Scale the image to cover the entire container */ } 100% { transform: perspective(100px) rotateX(0) rotateY(0); background-image: url('icon_cube_border.png'); /* Replace with the URL of your image */ background-size: cover; /* Scale the image to cover the entire container */ } } .${className} > div { animation-fill-mode: both; width: 50px; height: 50px; background: #fff; animation: square-spin 6s 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: 99999; } `; 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 = `
`; return { appendLoading() { safeDOM.append(document.head, oStyle); safeDOM.append(document.body, oDiv); }, removeLoading() { safeDOM.remove(document.head, oStyle); safeDOM.remove(document.body, oDiv); }, }; } // ---------------------------------------------------------------------- const { appendLoading, removeLoading } = useLoading(); domReady().then(appendLoading); window.onmessage = (ev) => { ev.data.payload === "removeLoading" && removeLoading(); }; setTimeout(removeLoading, 3999);