improve SmokeAPI detection and redesign loading screen

src/styles/components/layout/_loading_screen.scss

@@ -8,19 +8,21 @@
   position: fixed;
   top: 0;
   left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: var(--primary-bg);
+  width: 100%;
+  height: 100%;
+  background: var(--primary-bg);
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: var(--z-modal) + 1;
+  z-index: 9999;
 
   .loading-content {
     text-align: center;
     padding: 2rem;
-    max-width: 500px;
-    width: 90%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
 
     h1 {
       font-size: 2.5rem;
@@ -31,72 +33,46 @@
     }
 
     .loading-animation {
-      margin-bottom: 2rem;
-    }
+      margin: 1rem 0;
 
-    .loading-circles {
-      display: flex;
-      justify-content: center;
-      gap: 1rem;
-      margin-bottom: 1rem;
-
-      .circle {
-        width: 20px;
-        height: 20px;
+      // Spinner styles - thicker border
+      .loading-spinner {
+        width: 50px;
+        height: 50px;
         border-radius: 50%;
-        animation: bounce 1.4s infinite ease-in-out both;
-
-        &.circle-1 {
-          background-color: var(--primary-color);
-          animation-delay: -0.32s;
-        }
-
-        &.circle-2 {
-          background-color: var(--cream-color);
-          animation-delay: -0.16s;
-        }
-
-        &.circle-3 {
-          background-color: var(--smoke-color);
-        }
+        border: 6px solid rgba(255, 255, 255, 0.1);
+        border-top-color: var(--primary-color);
+        animation: spin 1s linear infinite;
       }
     }
 
     .loading-message {
-      font-size: 1.1rem;
+      font-size: 1rem;
       color: var(--text-secondary);
-      margin-bottom: 1.5rem;
-      min-height: 3rem;
+      margin: 0;
     }
 
     .loading-status-log {
-      margin: 1rem 0;
-      text-align: left;
-      max-height: 100px;
-      overflow-y: auto;
-      background-color: rgba(0, 0, 0, 0.2);
-      border-radius: var(--radius-sm);
-      padding: 0.5rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      width: 100%;
+      max-width: 400px;
 
       .status-line {
-        margin: 0.5rem 0;
         display: flex;
         align-items: center;
+        gap: 0.75rem;
+        padding: 0.5rem;
+        border-radius: 4px;
+        transition: all 0.3s ease;
 
-        .status-indicator {
-          color: var(--primary-color);
-          margin-right: 0.5rem;
-          font-size: 1.2rem;
-        }
+        &.active {
+          background-color: rgba(var(--primary-color-rgb), 0.1);
 
-        .status-text {
-          color: var(--text-secondary);
-          font-size: 0.9rem;
-        }
-
-        &:last-child {
-          .status-indicator {
-            color: var(--success);
+          .status-step {
+            color: var(--primary-color);
+            font-weight: 600;
           }
 
           .status-text {
@@ -104,48 +80,21 @@
             font-weight: 600;
           }
         }
+
+        .status-step {
+          color: var(--text-secondary);
+          font-family: 'Courier New', monospace;
+          font-weight: 500;
+          min-width: 3rem;
+          text-align: left;
+        }
+
+        .status-text {
+          color: var(--text-secondary);
+          text-align: left;
+          flex: 1;
+        }
       }
     }
-
-    .progress-bar-container {
-      height: 8px;
-      background-color: var(--border-soft);
-      border-radius: 4px;
-      overflow: hidden;
-      margin-bottom: 0.5rem;
-    }
-
-    .progress-bar {
-      height: 100%;
-      background-color: var(--primary-color);
-      border-radius: 4px;
-      transition: width 0.5s ease;
-      background: linear-gradient(
-        to right,
-        var(--cream-color),
-        var(--primary-color),
-        var(--smoke-color)
-      );
-      box-shadow: 0px 0px 10px rgba(255, 200, 150, 0.4);
-    }
-
-    .progress-percentage {
-      text-align: right;
-      font-size: 0.875rem;
-      color: var(--text-secondary);
-      margin-bottom: 1rem;
-    }
-  }
-}
-
-// Animation for the bouncing circles
-@keyframes bounce {
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-  }
-  40% {
-    transform: scale(1);
   }
 }