feat: enhance activity state component with new progress icon and animations

Author: caperaven

app/activity-state/activity-state.css

@@ -1,3 +1,7 @@
 h2 {
 	color: darkgreen;
 }
+
+activity-state {
+	margin: 1rem;
+}

app/material-icons/icons.js

@@ -923,6 +923,7 @@ export const icons = [
   "present_to_all",
   "preview",
   "print",
+  "progress_activity",
   "print_disabled",
   "priority_high",
   "privacy_tip",

components/activity-state/activity-state.css

@@ -3,4 +3,26 @@
     box-sizing: border-box;
     width: 1.5rem;
     height: 1.5rem;
-}
+}
+
+.rotate {
+    animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.success {
+    fill: green;
+}
+
+.error {
+    fill: red;
+}
+

components/activity-state/activity-state.js

@@ -3,6 +3,8 @@ import { ComponentModule } from "../../src/modules/component.js";
 class ActivityState extends HTMLElement {
     static name = Object.freeze("activity-state");
 
+    #state;
+
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
@@ -14,22 +16,41 @@ class ActivityState extends HTMLElement {
             url: import.meta.url,
         });
 
-        this.style.display = "block";
+        requestAnimationFrame(() => {
+            if (this.#state) {
+                this.setState(this.#state);
+            }
+            this.style.display = "block";
+        });
     }
 
     setState(state) {
         const materialIcon = this.shadowRoot.querySelector("material-icon");
 
+        if (materialIcon == null) {
+            this.#state = state;
+            return;
+        }
+
         const iconName = {
-            "busy": "hourglass_full",
-            "success": "check_circle",
-            "error": "error",
+            "busy"      : "progress_activity",
+            "success"   : "check",
+            "error"     : "error_outline",
         }[state];
 
         ComponentModule.on_ready({
             element: materialIcon,
             callback: () => {
                 materialIcon.setIcon(iconName);
+                materialIcon.classList.remove("success", "error", "rotate");
+
+                if (state === "busy") {
+                    materialIcon.classList.add("rotate");
+                } else if (state === "success") {
+                    materialIcon.classList.add("success");
+                } else if (state === "error") {
+                    materialIcon.classList.add("error");
+                }
             }
         })
     }

components/material-icon/icons/progress_activity.svg

@@ -21,6 +21,8 @@ export class MaterialIcon extends HTMLElement {
         this.style.alignItems = "center";
         this.style.justifyContent = "center";
         this.style.pointerEvents = "none";
+        this.style.width = "24px";
+        this.style.height = "24px";
 
         ComponentModule.ready({element: this});
     }

components/material-icon/material-icon.js

@@ -29,14 +29,14 @@ export function validateArgs(args, def, prefix = "") {
 		const arg = def[key];
 		const value = args[key];
 
-		if (arg.required && value === undefined) {
+		if (arg.required && value == null) {
 			throw new Error(`${prefix}Argument "${key}" is required`.trim());
 		}
 
-		if (value !== undefined) {
+		if (value != null) {
 			const expectedType = arg.type.toLowerCase();
 			const actualType = typeof value === "object"
-				? value.constructor.name.toLowerCase()
+				? value.constructor?.name.toLowerCase()
 				: typeof value;
 
 			const globalType = globalThis[arg.type ?? ""];
@@ -45,7 +45,7 @@ export function validateArgs(args, def, prefix = "") {
 					`${prefix}Argument "${key}" should be of type "${arg.type}"`.trim(),
 				);
 			}
-		} else if (arg.default !== undefined) {
+		} else if (arg.default != null) {
 			args[key] = arg.default;
 		}
 	}