Improve useLoading function with customization options and performanc…

…e enhancements
derekhe · Sep 18, 2024 · 370b5cb · 370b5cb
1 parent 68547b3
commit 370b5cb
Showing 1 changed file with 45 additions and 39 deletions.
diff --git a/packages/preload/loading.ts b/packages/preload/loading.ts
@@ -1,48 +1,54 @@
-export function useLoading() {
-  const className = `loaders-css__square-spin`
+export function useLoading(options = {}) {
+  const {
+    size = 50,
+    color = '#fff',
+    backgroundColor = '#282c34',
+    duration = 3,
+  } = options;
+
+  const className = 'loader-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')
+    @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} {
+      width: ${size}px;
+      height: ${size}px;
+      background: ${color};
+      animation: square-spin ${duration}s 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: ${backgroundColor};
+      z-index: 9999;
+    }
+  `;
+
+  const styleElement = document.createElement('style');
+  const wrapperElement = document.createElement('div');
 
-  oStyle.id = 'app-loading-style'
-  oStyle.innerHTML = styleContent
-  oDiv.className = 'app-loading-wrap'
-  oDiv.innerHTML = `<div class="${className}"><div></div></div>`
+  // ... existing code ...
 
   return {
     appendLoading() {
-      document.head.appendChild(oStyle)
-      document.body.appendChild(oDiv)
+      if (!document.getElementById('app-loading-style')) {
+        document.head.appendChild(styleElement);
+      }
+      document.body.appendChild(wrapperElement);
     },
     removeLoading() {
-      document.head.removeChild(oStyle)
-      document.body.removeChild(oDiv)
+      styleElement.remove();
+      wrapperElement.remove();
     },
-  }
+  };
 }