v.1.7 - Changed loading animation

 to use a custom on-brand  animation 🌈

.vscodeignore

@@ -13,6 +13,6 @@ refactor
 webpack.config.js
 img/**
 !img/logo.webp
-!img/loading.gif
+!img/loader-clip.mp4
 todo.md
 funding.yml

CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to this project are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.7.0] - 2023-11-21
+
+### Changed
+
+- Changed loading animation to use a custom on-brand animation. 🌈
+- Changed a few styles for loading state.
+
 ## [1.6.0] - 2023-11-18
 
 ### Changed

README.md

@@ -12,7 +12,7 @@
 <p align="center">
 <img src="https://img.shields.io/static/v1?logo=visual-studio-code&label=made%20for&message=VS%20Code&color=4747d1" alt="Made for VSCode">
 <img src="https://img.shields.io/visual-studio-marketplace/v/robole.snippets-ranger?logo=visual-studio-code&color=4747d1" alt="Visual Studio Marketplace Version">
-<img src="https://img.shields.io/static/v1?logo=visual-studio-code&label=size&message=65KB&color=4747d1"
+<img src="https://img.shields.io/static/v1?logo=visual-studio-code&label=size&message=159KB&color=4747d1"
 alt="Extension file size in bytes">
 <img src="https://img.shields.io/visual-studio-marketplace/r/robole.snippets-ranger?logo=visual-studio-code&color=4747d1" alt="Visual Studio Marketplace Rating">
 <img src="https://img.shields.io/visual-studio-marketplace/d/robole.snippets-ranger?logo=visual-studio-code&color=4747d1" alt="downloads"/>
@@ -21,9 +21,9 @@ alt="Extension file size in bytes">
 <a href="https://ko-fi.com/roboleary"><img src="https://img.shields.io/badge/Buy%20me%20a%20coffee-$4-gold?logo=buy-me-a-coffee" alt="Buy me a coffee"></a>
 </p>
 
-![Screenshot of the view. It shows the user snippets for the markdown language in a table with the columns: prefix, name, description, body and action.](img/screenshots/view-showcase.webp)
+![Screenshot of the webview. It shows the user snippets for the markdown language in a table with the columns: prefix, name, description, body and action.](img/screenshots/view-showcase.webp)
 
-Snippets are shown in an **easy to read [webview](https://code.visualstudio.com/api/extension-guides/webview)**.
+Snippets are shown in an **easy to browse [webview](https://code.visualstudio.com/api/extension-guides/webview)**.
 
 Snippets are formed into posses:
 - ***Project***: These are the snippets contained in the `.vscode` folder of the current workspace,
@@ -68,7 +68,7 @@ If you are working in code and would like to **quickly add a snippet to a snippe
 
 The following commands are available:
 
-1. **`Snippets Ranger: Show me that dur Range, Partner`**: Opens the view that lists all your snippets.
+1. **`Snippets Ranger: Show me that dur Range, Partner`**: Opens the webview that lists all your snippets.
 1. **`Snippets Ranger: Add new snippet to snippets file...`**: Quickly add a new snippet to a snippet file of your choosing. If you have code selected, this selection will be added to the `body` of the snippet. Any dollar signs in the selection will be escaped (preceded by 2 backslashes) to prevent them being interpreted as tab stops.
 
 ## Activation

package.json

@@ -7,7 +7,7 @@
   },
   "description": "View and edit all your snippets in one purty place. Yee-haw!",
   "icon": "img/logo.webp",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "engines": {
     "vscode": "^1.4.0",
     "node": ">=12.0.0"

src/core/fetch.js

@@ -14,7 +14,7 @@ function fetch(globalStoragePath) {
     try {
       paths = await env.getProjectSnippetPaths();
     } catch (error) {
-      console.log(`No project files. Error: ${error}`);
+      console.error(`No project files. ${error}`);
     }
 
     let snippetsFiles = await fetchSnippetsFiles(paths);
@@ -31,7 +31,7 @@ function fetch(globalStoragePath) {
     try {
       paths = await env.getUserSnippetPaths(globalStoragePath);
     } catch (error) {
-      console.log(`No user files. Error: ${error}`);
+      console.error(`No user files. ${error}`);
     }
 
     let snippetsFiles = fetchSnippetsFiles(paths);
@@ -48,7 +48,7 @@ function fetch(globalStoragePath) {
     try {
       paths = await env.getAppSnippetPaths();
     } catch (error) {
-      console.log(`No app files. Error: ${error}`);
+      console.error(`No app files. ${error}`);
     }
 
     let snippetsFiles = await fetchSnippetsFiles(paths);

src/view/styles.css

@@ -107,6 +107,48 @@ body {
   }
 }
 
+.loading {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  align-items: center;
+}
+
+.loading p {
+  --color1: hsl(280, 100%, 50%);
+  --color2: hsl(280, 100%, 20%);
+
+  font-size: 1.75rem;
+
+  -webkit-background-clip: text;
+  background-image: repeating-linear-gradient(
+    0deg,
+    var(--color1),
+    var(--color1) 25%,
+    var(--color2) 25%,
+    var(--color2) 50%
+  );
+  background-position: center;
+  font-size: 2rem;
+  font-weight: 900;
+  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+
+  color: transparent;
+  filter: drop-shadow(0 8px 10px white) drop-shadow(8px 0 10px white)
+    drop-shadow(-8px 0 10px white) drop-shadow(0 -8px 10px white)
+    drop-shadow(0 10px 2px pink) drop-shadow(0 -10px 2px pink);
+  text-align: center;
+  margin: 1rem;
+  padding: 2rem;
+}
+
+video {
+  width: 400px;
+  aspect-ratio: 1 / 1;
+  max-width: 100%;
+  border-radius: 50%;
+}
+
 p {
   margin: 0;
   margin-block-start: 1.5rem;

src/view/webview.js

@@ -96,11 +96,11 @@ function View(context) {
 		<body>
 		<main class="loading">
 		<h1>Snippets Ranger</h1>
-			<img src=${convertToWebviewUri(
+			<video src=${convertToWebviewUri(
         "img",
-        "loading.gif"
-      )} alt="loading image" class="gif"/>
-			<p style="text-align:center">Rounding them up!</p>
+        "loader-clip.mp4"
+      )} autoplay muted loop></video>
+			<p>Rounding them up!</p>
 		</main>
 		</body></html>`;