Remove loader animation. Fix correct background color according to theme while loading. Set correct color on BrowserWindow to prevent white flash.

electron/main/index.ts

@@ -48,6 +48,7 @@ async function createWindow() {
     win = new BrowserWindow({
         title: 'Main window',
         icon: join(process.env.PUBLIC, 'favicon.ico'),
+        backgroundColor: nativeTheme.shouldUseDarkColors ? '#262B37' : '#FFFFFF',
         //titleBarStyle: 'customButtonsOnHover',
         autoHideMenuBar: true,
         webPreferences: {

electron/preload/index.ts

@@ -37,28 +37,10 @@ const safeDOM = {
   },
 }
 
-/**
- * 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 {
-  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;
@@ -68,8 +50,16 @@ function useLoading() {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #282c34;
+  background: #fff;
   z-index: 9;
+}
+@media (prefers-color-scheme: dark) {
+    .${className} > div {
+        background: #fff;
+    }
+    .app-loading-wrap {
+        background: #262B37
+    }
 }
     `
   const oStyle = document.createElement('style')
@@ -78,7 +68,7 @@ function useLoading() {
   oStyle.id = 'app-loading-style'
   oStyle.innerHTML = styleContent
   oDiv.className = 'app-loading-wrap'
-  oDiv.innerHTML = `<div class="${className}"><div></div></div>`
+  oDiv.innerHTML = `<div class="${className}"></div>`
 
   return {
     appendLoading() {