fix: Unsquish the loading spinner [IDE-1101] (#279)

rrama · web-flow · commit c369c2531247 · 2025-04-02T10:11:23.000+01:00
The spinner is displayed while waiting for the LS to load.
Refactored the CSS and HTML.
diff --git a/plugin/src/main/resources/ui/html/ScanSummaryInit.html b/plugin/src/main/resources/ui/html/ScanSummaryInit.html
@@ -6,26 +6,24 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="Content-Security-Policy"
-  content="style-src 'self' 'nonce-${nonce}' 'nonce-ideNonce' https://fonts.googleapis.com;
-  script-src 'nonce-${nonce}' https://fonts.googleapis.com;
-  font-src 'self' https://fonts.gstatic.com;" />
+        content="style-src 'self' 'nonce-${nonce}' 'nonce-ideNonce' https://fonts.googleapis.com;
+        script-src 'nonce-${nonce}' https://fonts.googleapis.com;
+        font-src 'self' https://fonts.gstatic.com;" />
   <style nonce=${nonce}>
-  @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
 
-  :root {
-    font-size: var(--main-font-size);
-    --default-font: "SF Pro Text", "Segoe UI", "Ubuntu", Geneva, Verdana, Tahoma, sans-serif;
-    --ide-background-color: var(--vscode-sideBar-background);
-    --text-color: var(--vscode-foreground);
-    --input-border: var(--vscode-input-border);
-  }
-  p { font-size:1.3rem; margin: .8rem 0;  }
-  hr { margin: 2rem 0; }
-  body { background-color:var(--ide-background-color); color: var(--text-color); font-family: var(--default-font); }
-    .snx-loader { display:inline-block; width: 12px; height: 12px; border: 2px solid rgba(125,125,125,.65); border-bottom-color: transparent; border-radius: 50%; margin-right:.8rem; animation: spin 1s linear infinite;
+    :root {
+      font-size: var(--main-font-size);
+      --default-font: "SF Pro Text", "Segoe UI", "Ubuntu", Geneva, Verdana, Tahoma, sans-serif;
+      --ide-background-color: var(--vscode-sideBar-background);
+      --text-color: var(--vscode-foreground);
+      --input-border: var(--vscode-input-border);
     }
-    .size-s { width: 12px; height: 12px; border-width:2px }
+    p { font-size:1.3rem; margin: .8rem 0;  }
+    hr { margin: 2rem 0; }
+    body { background-color:var(--ide-background-color); color: var(--text-color); font-family: var(--default-font); }
 
+    .snx-loader { flex: none; display: inline-block; width: 10px; height: 10px; border: 2px solid rgba(125,125,125,.65); border-bottom-color: transparent; border-radius: 50%; margin-right:.8rem; animation: spin 1s linear infinite; }
     @keyframes spin {
       from { transform: rotate(0deg); }
       to { transform: rotate(360deg); }
@@ -36,18 +34,17 @@
     .snx-status { display:flex; align-items:center; padding: .4rem 1.2rem; background-color: rgba(255,255,255,.1); border-radius: 1rem; }
 
     .snx-header { display: flex; gap:1.6rem; }
-    .snx-message { display: flex; align-items: center }
+    .snx-status .snx-message { display: flex; align-items: center }
   </style>
   ${ideStyle}
 </head>
 <body>
-
   <div class="snx-header">
     <h1 class="snx-title snx-h1">Snyk Security is loading...</h1>
   </div>
   <div class="snx-summary">
     <div class="snx-status">
-      <span class="snx-loader size-s"></span>
+      <span class="snx-loader"></span>
       <p class="snx-message">Waiting for the Snyk CLI to be downloaded and the Language Server to be initialized. </p>
     </div>
   </div>
