Replace spinner with indeterminate progress bar

chromaui · May 22, 2024 · 06ea1fd · 06ea1fd
1 parent dae2683
commit 06ea1fd
Showing 1 changed file with 37 additions and 19 deletions.
diff --git a/src/components/SnapshotImage.tsx b/src/components/SnapshotImage.tsx
@@ -3,18 +3,47 @@ import { keyframes, styled, useTheme } from "@storybook/theming";
 import React, { ComponentProps } from "react";
 
 import { CaptureImage, CaptureOverlayImage, ComparisonResult, Test } from "../gql/graphql";
-import { Spinner } from "./design-system";
 import { Stack } from "./Stack";
 import { Text } from "./Text";
 
-export const Container = styled.div<{ href?: string; target?: string }>(
-  ({ theme }) => ({
+const indeterminateProgressBar = keyframes({
+  "0%": {
+    transform: "translateX(0) scaleX(0)",
+  },
+  "40%": {
+    transform: "translateX(0) scaleX(0.4)",
+  },
+  "100%": {
+    transform: "translateX(100%) scaleX(0.5)",
+  },
+});
+
+export const Container = styled.div<{ loading?: boolean; href?: string; target?: string }>(
+  ({ loading, theme }) => ({
     position: "relative",
     display: "flex",
     background: "transparent",
     overflow: "hidden",
     margin: 2,
     maxWidth: "calc(100% - 4px)",
+    verticalAlign: "top",
+
+    "&::before": {
+      content: "''",
+      display: "block",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      height: 3,
+      width: "100%",
+      opacity: loading ? 1 : 0,
+      transform: "translateX(0) scaleX(0)",
+      background: theme.color.secondary,
+      animation: `1.5s linear 1s infinite ${indeterminateProgressBar}`,
+      transformOrigin: "0% 50%",
+      transition: "opacity 0.1s",
+      zIndex: 1,
+    },
 
     "& > div": {
       display: "flex",
@@ -61,26 +90,18 @@ const StyledStack = styled(Stack)(({ theme }) => ({
   margin: "30px 15px",
 }));
 
-const pulsate = keyframes({
-  "0%": { opacity: 0.5 },
-  "50%": { opacity: 1 },
-  "100%": { opacity: 0.5 },
-});
-
-const Image = styled.img<{ pulsating?: boolean }>(({ pulsating }) => ({
+const Image = styled.img({
   display: "block",
   width: "100%",
   height: "auto",
-  animation: pulsating ? `${pulsate} 2s infinite` : "none",
-  transition: "filter 0.1s ease-in-out, opacity 0.1s ease-in-out",
+  transition: "filter 0.1s ease-in-out",
 
   "&[data-overlay]": {
     position: "absolute",
     opacity: 0.7,
     pointerEvents: "none",
-    transition: "opacity 0.1s ease-in-out",
   },
-}));
+});
 
 interface SnapshotImageProps {
   componentName?: NonNullable<NonNullable<Test["story"]>["component"]>["name"];
@@ -134,9 +155,10 @@ export const SnapshotImage = ({
   } else if (showFocus) {
     overlayImageLoaded = focusImageLoaded;
   }
+  const loading = !latestImageLoaded || !overlayImageLoaded;
 
   return (
-    <Container {...props} {...containerProps}>
+    <Container {...props} {...containerProps} loading={loading && !hasError}>
       {latestImage && (
         <div
           style={{
@@ -148,9 +170,7 @@ export const SnapshotImage = ({
             minHeight: 100,
           }}
         >
-          {!latestImageLoaded && <Spinner />}
           <Image
-            pulsating={!overlayImageLoaded}
             alt={`Latest snapshot for the '${storyName}' story of the '${componentName}' component`}
             src={latestImage.imageUrl}
             style={{ opacity: latestImageLoaded ? 1 : 0 }}
@@ -169,9 +189,7 @@ export const SnapshotImage = ({
             minHeight: 40,
           }}
         >
-          {!baselineImageLoaded && <Spinner />}
           <Image
-            pulsating={!overlayImageLoaded}
             alt={`Baseline snapshot for the '${storyName}' story of the '${componentName}' component`}
             src={baselineImage.imageUrl}
             style={{ opacity: baselineImageLoaded ? 1 : 0 }}