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

rrama · web-flow · commit c50855299178 · 2025-04-02T10:15:15.000+01:00
The spinner is displayed while waiting for the LS to load.
Refactored the CSS and HTML.
Renamed the file to be in sync with the other IDEs.
diff --git a/.github/workflows/resource-check.yml b/.github/workflows/resource-check.yml
@@ -16,7 +16,7 @@ jobs:
           declare -A resources
           # Add each resource as a key, value pair, mapping the local resource to the reference file (which should be stored in the language server repository). For example:
           # resources["<path_to_local_file>"]="<url_of_reference_file>"
-          resources["Snyk.VisualStudio.Extension.2022/Resources/LoadingSummary.html"]="https://raw.githubusercontent.com/snyk/snyk-ls/refs/heads/main/shared_ide_resources/ui/html/ScanSummaryInit.html"
+          resources["Snyk.VisualStudio.Extension.2022/Resources/ScanSummaryInit.html"]="https://raw.githubusercontent.com/snyk/snyk-ls/refs/heads/main/shared_ide_resources/ui/html/ScanSummaryInit.html"
           for key in ${!resources[@]}; do
             candidate=$(sha512sum $key | awk {'print $1'})
             candidate=${candidate:="null"}
diff --git a/Snyk.VisualStudio.Extension.2022/Resources/LoadingSummary.html b/Snyk.VisualStudio.Extension.2022/Resources/LoadingSummary.html
diff --git a/Snyk.VisualStudio.Extension.2022/Resources/ScanSummaryInit.html b/Snyk.VisualStudio.Extension.2022/Resources/ScanSummaryInit.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv='Content-Type' content='text/html; charset=unicode' />
+  <meta http-equiv='X-UA-Compatible' content='IE=edge' />
+  <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;" />
+  <style nonce=${nonce}>
+    @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 { 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); }
+    }
+
+    .snx-h1 { font-size: 1.6rem; font-weight: 400; margin: .4rem 0; }
+
+    .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-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"></span>
+      <p class="snx-message">Waiting for the Snyk CLI to be downloaded and the Language Server to be initialized. </p>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/Snyk.VisualStudio.Extension.2022/Snyk.VisualStudio.Extension.2022.csproj b/Snyk.VisualStudio.Extension.2022/Snyk.VisualStudio.Extension.2022.csproj
@@ -117,7 +117,7 @@
     <Resource Include="Resources\branch-dark.png">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>
-    <Content Include="Resources\LoadingSummary.html">
+    <Content Include="Resources\ScanSummaryInit.html">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
       <IncludeInVSIX>true</IncludeInVSIX>
     </Content>
diff --git a/Snyk.VisualStudio.Extension.2022/UI/Html/StaticHtmlProvider.cs b/Snyk.VisualStudio.Extension.2022/UI/Html/StaticHtmlProvider.cs
@@ -36,7 +36,7 @@ public async Task<string> GetInitHtmlAsync()
             {
                 var assemblyLocation = Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().Location);
                 if (assemblyLocation == null) return string.Empty;
-                var path = Path.Combine(assemblyLocation, "Resources", "LoadingSummary.html");
+                var path = Path.Combine(assemblyLocation, "Resources", "ScanSummaryInit.html");
                 using (var stream = new StreamReader(path))
                 {
                     var html = await stream.ReadToEndAsync();

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ public async Task<string> GetInitHtmlAsync()`
`36`	`36`	`{`
`37`	`37`	`var assemblyLocation = Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().Location);`
`38`	`38`	`if (assemblyLocation == null) return string.Empty;`
`39`		`- var path = Path.Combine(assemblyLocation, "Resources", "LoadingSummary.html");`
	`39`	`+ var path = Path.Combine(assemblyLocation, "Resources", "ScanSummaryInit.html");`
`40`	`40`	`using (var stream = new StreamReader(path))`
`41`	`41`	`{`
`42`	`42`	`var html = await stream.ReadToEndAsync();`