feat(LoadingIndicator): extract and use SVG animation directly (#1540)

- we only have one particular loading indicator we want to use at this time - apply styles and parameters to match previous implementation's output
chanzuckerberg · Mar 10, 2023 · 6e315ea · 6e315ea
1 parent 8c8018b
commit 6e315ea
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 52 deletions.
diff --git a/package.json b/package.json
@@ -87,7 +87,6 @@
     "react-beautiful-dnd": "^13.1.1",
     "react-children-by-type": "^1.1.0",
     "react-focus-lock": "^2.9.4",
-    "react-loader-spinner": "^5.3.4",
     "react-popper": "^2.3.0",
     "react-portal": "^4.2.2"
   },

diff --git a/src/components/LoadingIndicator/LoadingIndicator.module.css b/src/components/LoadingIndicator/LoadingIndicator.module.css
@@ -7,6 +7,12 @@
  */
 .loading-indicator {
   background-color: transparent;
+  padding: 3px; /* ported from react-loader-spinner */
+  display: flex;
+}
+
+.loading-indicator--invisible {
+  display: none;
 }
 
 /* override for `color` */

diff --git a/src/components/LoadingIndicator/LoadingIndicator.tsx b/src/components/LoadingIndicator/LoadingIndicator.tsx
@@ -1,7 +1,6 @@
 import clsx from 'clsx';
 import React from 'react';
 
-import { Oval } from 'react-loader-spinner';
 import styles from './LoadingIndicator.module.css';
 
 export type Props = {
@@ -18,17 +17,11 @@ export type Props = {
 
   /**
    * Aria label of the oval. Default is "loading". Will be overridden if ariaLabel is passed in props
-   * (Shadowed from OvalProps)
-   *
-   * See: https://mhnpd.github.io/react-loader-spinner/docs/components/oval
    */
   ariaLabel?: string;
 
   /**
    * Whether the oval is visible. Default is true.
-   * (Shadowed from OvalProps)
-   *
-   * See: https://mhnpd.github.io/react-loader-spinner/docs/components/oval
    */
   visible?: boolean;
 };
@@ -47,14 +40,21 @@ const loaderStrokeSize = {
   lg: 4,
 };
 
+// The viewport changes based on adjustments to handle the stroke width
+const loaderViewportSize = {
+  sm: '-20 -20 42 42',
+  md: '-20.5 -20.5 43 43',
+  lg: '-21 -21 44 44',
+};
+
 /**
  * BETA: This component is still a work in progress and is subject to change.
  *
  * `import {LoadingIndicator} from "@chanzuckerberg/eds";`
  *
  * Loading indicators inform users about the wait time, reason, and status of ongoing processes when the layout is unknown
  *
- * For screen readers, add an `aria-label` to describe what is loading.
+ * For screen readers, add a custom `aria-label` to describe what is loading.
  *
  */
 export const LoadingIndicator = ({
@@ -64,22 +64,58 @@ export const LoadingIndicator = ({
   visible = true,
   ...other
 }: Props) => {
-  const componentClassName = clsx(styles['loading-indicator'], className);
+  const componentClassName = clsx(
+    styles['loading-indicator'],
+    !visible && styles['loading-indicator--invisible'],
+    className,
+  );
 
   // setting the colors to be transparent since we override in CSS
   // (and have a lint rule prevent token variable use in components)
   return (
-    <Oval
-      ariaLabel={ariaLabel}
-      color="transparent"
-      height={loaderSize[size]}
-      secondaryColor="transparent"
-      strokeWidth={loaderStrokeSize[size]}
-      strokeWidthSecondary={loaderStrokeSize[size]}
-      visible={visible}
-      width={loaderSize[size]}
-      wrapperClass={componentClassName}
+    <div
+      aria-busy="true"
+      aria-label={ariaLabel}
+      className={componentClassName}
+      data-testid="oval-loading"
+      role="status"
       {...other}
-    />
+    >
+      <svg
+        data-testid="oval-svg"
+        height={loaderSize[size]}
+        stroke="transparent"
+        viewBox={loaderViewportSize[size]}
+        width={loaderSize[size]}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g fill="none" fillRule="evenodd">
+          <g
+            data-testid="oval-secondary-group"
+            strokeWidth={loaderStrokeSize[size]}
+            transform="translate(1 1)"
+          >
+            <circle
+              cx="0"
+              cy="0"
+              r="20"
+              stroke="transparent"
+              strokeOpacity=".5"
+              strokeWidth={loaderStrokeSize[size]}
+            ></circle>
+            <path d="M20 0c0-9.94-8.06-20-20-20">
+              <animateTransform
+                attributeName="transform"
+                dur="1s"
+                from="0 0 0"
+                repeatCount="indefinite"
+                to="360 0 0"
+                type="rotate"
+              ></animateTransform>
+            </path>
+          </g>
+        </g>
+      </svg>
+    </div>
   );
 };
diff --git a/src/components/LoadingIndicator/__snapshots__/LoadingIndicator.test.ts.snap b/src/components/LoadingIndicator/__snapshots__/LoadingIndicator.test.ts.snap
@@ -7,7 +7,6 @@ exports[`<LoadingIndicator /> Default story renders snapshot 1`] = `
   class="loading-indicator"
   data-testid="oval-loading"
   role="status"
-  style="display: flex; padding: 3px;"
 >
   <svg
     data-testid="oval-svg"
@@ -56,10 +55,9 @@ exports[`<LoadingIndicator /> Invisible story renders snapshot 1`] = `
 <div
   aria-busy="true"
   aria-label="loading"
-  class="loading-indicator"
+  class="loading-indicator loading-indicator--invisible"
   data-testid="oval-loading"
   role="status"
-  style="display: none; padding: 3px;"
 >
   <svg
     data-testid="oval-svg"
@@ -111,7 +109,6 @@ exports[`<LoadingIndicator /> Large story renders snapshot 1`] = `
   class="loading-indicator"
   data-testid="oval-loading"
   role="status"
-  style="display: flex; padding: 3px;"
 >
   <svg
     data-testid="oval-svg"
@@ -163,7 +160,6 @@ exports[`<LoadingIndicator /> Medium story renders snapshot 1`] = `
   class="loading-indicator"
   data-testid="oval-loading"
   role="status"
-  style="display: flex; padding: 3px;"
 >
   <svg
     data-testid="oval-svg"
@@ -215,7 +211,6 @@ exports[`<LoadingIndicator /> Small story renders snapshot 1`] = `
   class="loading-indicator"
   data-testid="oval-loading"
   role="status"
-  style="display: flex; padding: 3px;"
 >
   <svg
     data-testid="oval-svg"
@@ -267,7 +262,6 @@ exports[`<LoadingIndicator /> WithAriaLabel story renders snapshot 1`] = `
   class="loading-indicator"
   data-testid="oval-loading"
   role="status"
-  style="display: flex; padding: 3px;"
 >
   <svg
     data-testid="oval-svg"

diff --git a/yarn.lock b/yarn.lock
@@ -1715,7 +1715,6 @@ __metadata:
     react-children-by-type: ^1.1.0
     react-dom: ^18.2.0
     react-focus-lock: ^2.9.4
-    react-loader-spinner: ^5.3.4
     react-popper: ^2.3.0
     react-portal: ^4.2.2
     size-limit: ^8.2.4
@@ -17502,27 +17501,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^18.0.0, react-is@npm:^18.2.0":
+"react-is@npm:^18.0.0":
   version: 18.2.0
   resolution: "react-is@npm:18.2.0"
   checksum: e72d0ba81b5922759e4aff17e0252bd29988f9642ed817f56b25a3e217e13eea8a7f2322af99a06edb779da12d5d636e9fda473d620df9a3da0df2a74141d53e
   languageName: node
   linkType: hard
 
-"react-loader-spinner@npm:^5.3.4":
-  version: 5.3.4
-  resolution: "react-loader-spinner@npm:5.3.4"
-  dependencies:
-    react-is: ^18.2.0
-    styled-components: ^5.3.5
-    styled-tools: ^1.7.2
-  peerDependencies:
-    react: ^16.0.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
-  checksum: 429ee74233b2a225164bd77cce94459c20443411248e00604a21752fabf31a36749cc4d52c2a2cf194b98b37c543e0cbb9b76a0e49188acd1f17087035544ca6
-  languageName: node
-  linkType: hard
-
 "react-merge-refs@npm:^1.0.0":
   version: 1.1.0
   resolution: "react-merge-refs@npm:1.1.0"
@@ -19529,7 +19514,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"styled-components@npm:^5.2.1, styled-components@npm:^5.3.5":
+"styled-components@npm:^5.2.1":
   version: 5.3.6
   resolution: "styled-components@npm:5.3.6"
   dependencies:
@@ -19551,13 +19536,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"styled-tools@npm:^1.7.2":
-  version: 1.7.2
-  resolution: "styled-tools@npm:1.7.2"
-  checksum: 00cc1796085589b8d95d5a4183806d45b1d332fbc1dcf19922b01b81bd871c5a499fce64e82bb63bbead5bb8fe317f60a6e91c2fe01bf1ed79f5953977a05065
-  languageName: node
-  linkType: hard
-
 "stylelint-config-recommended@npm:^10.0.1":
   version: 10.0.1
   resolution: "stylelint-config-recommended@npm:10.0.1"