fix: #94

Author: SpaceEnergy

options/general/userpannel/userpannel.css

@@ -1,46 +1,3 @@
-/* Loading Screen */
-#loading-div {
-    z-index: 9999;
-    position: fixed;
-    top: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(var(--background));
-}
-
-.radial-loader {
-    width: 54px;
-    height: 54px;
-    border: 8px solid rgba(var(--color-2));
-    border-top: 8px solid rgb(var(--accent-1));
-    border-radius: 50%;
-    animation: spin .6s linear infinite;
-}
-
-.loading-text {
-    opacity: .7;
-    margin-top: 20px;
-    font-size: 24px;
-    font-weight: 600;
-    color: #fff;
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-
-
 /*
 ! Userpannel
 */

options/general/userpannel/userpannel.js

@@ -22,41 +22,6 @@ const waitForElement = (selector, parent = document) => new Promise((resolve) =>
 
 
 
-// Create Loading Screen
-const createLoadingDiv = () => {
-    const loadingDiv = document.createElement('div');
-    loadingDiv.id = 'loading-div';
-
-    // Text
-    const textDiv = document.createElement('div');
-    textDiv.className = 'loading-text';
-    textDiv.innerText = 'Loading Steam interface';
-
-    // Radial Loader
-    const loadingIndicator = document.createElement('div');
-    loadingIndicator.className = 'radial-loader';
-
-    loadingDiv.appendChild(loadingIndicator);
-    loadingDiv.appendChild(textDiv);
-
-    // Apply to body
-    document.body.appendChild(loadingDiv);
-
-    // Timer
-    setTimeout(() => {
-        document.body.removeChild(loadingDiv);
-    }, 3000);
-};
-
-// Patch to body
-waitForElement('.Rp8QOGJ2DypeDniMnRBhr').then(() => {
-    if (!document.getElementById('loading-div')) {
-        createLoadingDiv();
-    }
-});
-
-
-
 // Move Elements
 (async () => {
     var gameListSidebar = await waitForElement('._3x1HklzyDs4TEjACrRO2tB');

src/css/libraryroot.custom.css

@@ -8,6 +8,41 @@
 @import url("./steam/achievementsModal.css");
 
 
+
+#st-loading-div {
+    z-index: 9999;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(var(--background));
+}
+
+.st-radial-loader {
+    width: 54px;
+    height: 54px;
+    border: 8px solid rgba(var(--color-2));
+    border-top: 8px solid rgb(var(--accent-1));
+    border-radius: 50%;
+    animation: st-spin .6s linear infinite;
+}
+
+@keyframes st-spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+
+
 /* Base */
 ._1ENHEsrSLcTRtPQFl1F-wL {
     border: none;

src/js/libraryroot.custom.js

@@ -1,25 +1,59 @@
-const waitForElement = (selector, parent = document) => {
-  return new Promise((resolve) => {
+const waitForElement = (selector, parent = document) => new Promise((resolve) => {
     const el = parent.querySelector(selector);
     if (el) {
-      resolve(el);
+        resolve(el);
     }
 
     const observer = new MutationObserver(() => {
-      const el = parent.querySelector(selector);
-      if (el) {
+        const el = parent.querySelector(selector);
+        if (!el) {
+            return;
+        }
+
         resolve(el);
         observer.disconnect();
-      }
     });
 
     observer.observe(document.body, {
-      subtree: true,
-      childList: true,
+        subtree: true,
+        childList: true,
     });
-  });
+});
+
+
+
+
+// Create Loading Screen
+const createLoadingDiv = () => {
+    const loadingDiv = document.createElement('div');
+    loadingDiv.id = 'st-loading-div';
+
+    // Radial Loader
+    const loadingIndicator = document.createElement('div');
+    loadingIndicator.className = 'st-radial-loader';
+
+    loadingDiv.appendChild(loadingIndicator);
+
+    // Apply to body
+    document.body.appendChild(loadingDiv);
+
+    // Timer
+    setTimeout(() => {
+        document.body.removeChild(loadingDiv);
+    }, 2500);
 };
 
+// Patch to body
+waitForElement('.Rp8QOGJ2DypeDniMnRBhr').then(() => {
+    if (!document.getElementById('st-loading-div')) {
+        createLoadingDiv();
+    }
+});
+
+
+
+
+// Store Sidebar Width half fix
 async function syncWidthIfTargetHidden() {
   const sourceClass = '._9sPoVBFyE_vE87mnZJ5aB';
   const targetClass = '.RGNMWtyj73_-WdhflrmuY';