Add loading placeholder animation and add it to custom software icons loading state (#33064)

2025-09-18 08:48:42 -05:00
parent 44eeb80988
commit 4bf3c5136a
2 changed files with 22 additions and 1 deletions
@@ -58,7 +58,7 @@ const SoftwareIcon = ({
  if (isApiUrl) {
    if (isLoading) {
      // Return empty div while loading custom icon so component size doesn't jump
-      return <div className={classNames} />;
+      return <div className={classNames.concat(" loading-placeholder")} />;
    }
    if (currentCustomIconBlob) {
      // Uses custom icon blob from API if fetch succeeded
@@ -37,4 +37,25 @@
        opacity: 1;
        transform: translateX(0);
    }
+}
+
+.loading-placeholder {
+    $from: #f5f5f5;
+    $to: scale-color($from, $lightness: -10%);
+
+    height: 100%;
+    width: 100%;
+    background: linear-gradient(-90deg, #efefef 0%, #fcfcfc 50%, #efefef 100%);
+    background-size: 400% 400%;
+    animation: pulse 1s ease-in-out infinite;
+
+    @keyframes pulse {
+        0% {
+            background-position: 0% 0%
+        }
+
+        100% {
+            background-position: -135% 0%
+        }
+    }
 }