Loading states

chromaui · Jun 22, 2023 · ec842be · ec842be
1 parent f160bc7
commit ec842be
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 55 deletions.
diff --git a/src/components/icons/StatusIcon.tsx b/src/components/icons/StatusIcon.tsx
@@ -1,8 +1,5 @@
 import { Icon } from "@storybook/design-system";
 import { styled } from "@storybook/theming";
-// import React from "react";
-
-// import { BuildStatus } from "../../gql/graphql";
 
 export const StatusIcon = styled(Icon)<{ icon: "passed" | "changed" | "failed" }>(
   ({ icon, theme }) => ({
@@ -18,18 +15,3 @@ export const StatusIcon = styled(Icon)<{ icon: "passed" | "changed" | "failed" }
     }[icon],
   })
 );
-
-// export const StatusIcon = ({ status }: { status: BuildStatus }) =>
-//   ({
-//     [BuildStatus.Announced]: null,
-//     [BuildStatus.Published]: null,
-//     [BuildStatus.Prepared]: null,
-//     [BuildStatus.InProgress]: null,
-//     [BuildStatus.Passed]: <StyledIcon icon="passed" />,
-//     [BuildStatus.Pending]: <StyledIcon icon="changed" />,
-//     [BuildStatus.Accepted]: <StyledIcon icon="passed" />,
-//     [BuildStatus.Denied]: <StyledIcon icon="failed" />,
-//     [BuildStatus.Broken]: <StyledIcon icon="failed" />,
-//     [BuildStatus.Failed]: <StyledIcon icon="failed" />,
-//     [BuildStatus.Cancelled]: <StyledIcon icon="failed" />,
-//   }[status]);
diff --git a/src/screens/VisualTests/VisualTests.tsx b/src/screens/VisualTests/VisualTests.tsx
@@ -1,4 +1,5 @@
-import { Icon, Input, Spinner } from "@storybook/design-system";
+import { Loader } from "@storybook/components";
+import { Icon, Input } from "@storybook/design-system";
 import { useTheme } from "@storybook/theming";
 import { formatDistance } from "date-fns";
 import pluralize from "pluralize";
@@ -8,8 +9,10 @@ import { useQuery } from "urql";
 import { BrowserSelector } from "../../components/BrowserSelector";
 import { Button } from "../../components/Button";
 import { IconButton } from "../../components/IconButton";
+import { ProgressIcon } from "../../components/icons/ProgressIcon";
 import { StatusIcon } from "../../components/icons/StatusIcon";
 import { Bar, Col, Row, Section, Sections, Text } from "../../components/layout";
+import { Placeholder } from "../../components/Placeholder";
 import { SnapshotImage } from "../../components/SnapshotImage";
 import { TooltipMenu } from "../../components/TooltipMenu";
 import { ViewportSelector } from "../../components/ViewportSelector";
@@ -99,7 +102,7 @@ export const VisualTests = ({ setAccessToken }: VisualTestsProps) => {
               </Col>
             </Row>
           )}
-          {fetching && <Spinner inverse={theme.base === "dark"} />}
+          {fetching && <Loader />}
           {!fetching && !data?.project && (
             <Row>
               <Col>
@@ -191,6 +194,7 @@ export const VisualTests = ({ setAccessToken }: VisualTestsProps) => {
 
   const test = tests.nodes?.find(({ result }) => result === TestResult.Changed) || tests.nodes?.[0];
   const isPending = test?.status === TestStatus.Pending;
+  const isInProgress = tests.nodes?.some(({ status }) => status === TestStatus.InProgress);
 
   const browserCount = browsers.length;
   const browserInfoById = Object.fromEntries(browsers.map((browser) => [browser.id, browser]));
@@ -211,12 +215,21 @@ export const VisualTests = ({ setAccessToken }: VisualTestsProps) => {
         <Row>
           <Col>
             <Text>
-              <b>
-                {changeCount ? pluralize("change", changeCount, true) : "No changes"}
-                {brokenCount ? `, ${pluralize("error", brokenCount, true)}` : null}
-              </b>
-              {/* eslint-disable-next-line no-nested-ternary */}
-              <StatusIcon icon={brokenCount ? "failed" : isPending ? "changed" : "passed"} />
+              {isInProgress ? (
+                <>
+                  <b>Running tests...</b>
+                  <ProgressIcon />
+                </>
+              ) : (
+                <>
+                  <b>
+                    {changeCount ? pluralize("change", changeCount, true) : "No changes"}
+                    {brokenCount ? `, ${pluralize("error", brokenCount, true)}` : null}
+                  </b>
+                  {/* eslint-disable-next-line no-nested-ternary */}
+                  <StatusIcon icon={brokenCount ? "failed" : isPending ? "changed" : "passed"} />
+                </>
+              )}
               <br />
               <small>
                 <span>
@@ -225,7 +238,11 @@ export const VisualTests = ({ setAccessToken }: VisualTestsProps) => {
                   {pluralize("browser", browserCount, true)}
                 </span>
                 {" • "}
-                <span title={new Date(startedAt).toUTCString()}>{startedAgo}</span>
+                {isInProgress ? (
+                  <span>Test in progress...</span>
+                ) : (
+                  <span title={new Date(startedAt).toUTCString()}>{startedAgo}</span>
+                )}
               </small>
             </Text>
           </Col>
@@ -237,41 +254,57 @@ export const VisualTests = ({ setAccessToken }: VisualTestsProps) => {
             </Col>
           )}
         </Row>
-        <Bar>
-          <Col>
-            <IconButton active={diffVisible} onClick={() => setDiffVisible(!diffVisible)}>
-              <Icon icon="contrast" />
-            </IconButton>
-          </Col>
-          {viewportResults.length > 0 && (
-            <Col>
-              <ViewportSelector viewportResults={viewportResults} onSelectViewport={console.log} />
-            </Col>
-          )}
-          {browserResults.length > 0 && (
+        {isInProgress ? (
+          <Bar>
+            <Placeholder />
+            <Placeholder />
+            <Placeholder width={50} marginLeft={-5} />
+            <Placeholder />
+          </Bar>
+        ) : (
+          <Bar>
             <Col>
-              <BrowserSelector browserResults={browserResults} onSelectBrowser={console.log} />
+              <IconButton active={diffVisible} onClick={() => setDiffVisible(!diffVisible)}>
+                <Icon icon="contrast" />
+              </IconButton>
             </Col>
-          )}
-          {changeCount > 0 && (
-            <>
-              <Col push>
-                <IconButton secondary>Accept</IconButton>
+            {viewportResults.length > 0 && (
+              <Col>
+                <ViewportSelector
+                  viewportResults={viewportResults}
+                  onSelectViewport={console.log}
+                />
               </Col>
+            )}
+            {browserResults.length > 0 && (
               <Col>
-                <IconButton secondary>
-                  <Icon icon="batchaccept" />
-                </IconButton>
+                <BrowserSelector browserResults={browserResults} onSelectBrowser={console.log} />
               </Col>
-            </>
-          )}
-        </Bar>
+            )}
+            {changeCount > 0 && (
+              <>
+                <Col push>
+                  <IconButton secondary>Accept</IconButton>
+                </Col>
+                <Col>
+                  <IconButton secondary>
+                    <Icon icon="batchaccept" />
+                  </IconButton>
+                </Col>
+              </>
+            )}
+          </Bar>
+        )}
       </Section>
       <Section grow hidden={settingsVisible || warningsVisible}>
-        <SnapshotImage>
-          <img src="/B.png" alt="" />
-          {diffVisible && <img src="/B-comparison.png" alt="" />}
-        </SnapshotImage>
+        {isInProgress ? (
+          <Loader />
+        ) : (
+          <SnapshotImage>
+            <img src="/B.png" alt="" />
+            {diffVisible && <img src="/B-comparison.png" alt="" />}
+          </SnapshotImage>
+        )}
       </Section>
       <Section grow hidden={!settingsVisible}>
         <RenderSettings onClose={() => setSettingsVisible(false)} />