Merge pull request #1315 from Bynder/feature/use-spinner-in-overlay

GC-3219 add the option to use a spinner in the loading overlay component
Bynder · Oct 25, 2023 · 0134fb9 · 0134fb9
2 parents cc76a69 + cc95f53
commit 0134fb9
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 7 deletions.
diff --git a/lib/LoadingOverlay/index.tsx b/lib/LoadingOverlay/index.tsx
@@ -1,12 +1,14 @@
 import React, { Fragment } from "react";
 import cx from "classnames";
 import LoadingSVG from "../../assets/loading.svg";
+import { Loader } from "../src/modules/loader/Loader";
 
 export function LoadingOverlay({
   fixed,
   hideSVG,
   percentageLoaded,
   loadingText,
+  useSpinner,
 }: any) {
   const className = cx("loading-overlay", {
     "loading-overlay--fixed": fixed,
@@ -15,13 +17,14 @@ export function LoadingOverlay({
   return (
     <div className={className} role="status">
       <div className="loading-overlay__content weight-semi-bold text-align-center">
-        {/* @ts-expect-error Type '{ title: string; }' is not assignable to type */}
-        {!hideSVG && <LoadingSVG title="Loading" />}
+        {!hideSVG && useSpinner && <Loader isOverlay />}
+        {!hideSVG && !useSpinner && (
+          // @ts-expect-error Type '{ title: string; }' is not assignable to type
+          <LoadingSVG title="Loading" />
+        )}
         {percentageLoaded > 0 && (
           <>
-            <p className="h-margin-bottom-quarter h-margin-top-clear">
-              {loadingText}
-            </p>
+            <p className="loading-overlay-text">{loadingText}</p>
             <p className="h-margin-clear color-neutral-base">{`${percentageLoaded}%`}</p>
           </>
         )}
@@ -33,6 +36,7 @@ export function LoadingOverlay({
 LoadingOverlay.defaultProps = {
   fixed: false,
   hideSVG: false,
+  useSpinner: false,
   percentageLoaded: 0,
   loadingText: "Loading",
 };

diff --git a/lib/LoadingOverlay/styles.scss b/lib/LoadingOverlay/styles.scss
@@ -18,6 +18,14 @@ $loading-line-width: 32px;
   justify-content: center;
   z-index: 2;
 
+  .loading-overlay-text {
+    @apply mt-0 mb-2;
+  }
+
+  .gc-loader + .loading-overlay-text {
+    @apply mt-4;
+  }
+
   .line {
     animation-duration: 2s;
     animation-timing-function: ease-in-out;

diff --git a/lib/src/modules/loader/Loader.stories.tsx b/lib/src/modules/loader/Loader.stories.tsx
@@ -11,9 +11,10 @@ export default {
 export function Loader() {
   return (
     <StoryItem title="LoaderComponent">
-      <div className="grid tw grid-cols-5 col-gap-4">
+      <div className="grid tw grid-cols-6 col-gap-4">
         <LoaderComponent size="sm" />
         <LoaderComponent size="md" />
+        <LoaderComponent isOverlay />
         <LoaderComponent size="lrg" />
         <LoaderComponent progress="25%" />
         <LoaderComponent heading="Processing" progress="100%" />

diff --git a/lib/src/modules/loader/Loader.tsx b/lib/src/modules/loader/Loader.tsx
@@ -2,11 +2,12 @@ import React from "react";
 import cx from "classnames";
 import { Icon } from "lib";
 
-function Loader({ heading, progress, size, className }: any) {
+function Loader({ heading, progress, size, className, isOverlay }: any) {
   const baseClassNames = `gc-loader flex items-center flex-col justify-center ${className}`;
   const classNames = cx(baseClassNames, {
     "loader-sm": size === "sm",
     "loader-md": size === "md",
+    "loader-overlay": isOverlay,
     "loader-lrg": size === "lrg" || progress,
   });
 

diff --git a/lib/src/modules/loader/loader.scss b/lib/src/modules/loader/loader.scss
@@ -6,6 +6,16 @@
   @apply w-8 h-8;
 }
 
+.loader-overlay {
+  @apply h-12;
+
+  width: 100%;
+}
+
+.loader-overlay svg {
+  @apply w-12 h-12;
+}
+
 .loader-lrg svg {
   @apply w-16 h-16;
 }
diff --git a/stories/components/LoadingOverlay.stories.tsx b/stories/components/LoadingOverlay.stories.tsx
@@ -8,6 +8,8 @@ export default {
   args: {
     percentageLoaded: 50,
     fixed: true,
+    useSpinner: false,
+    hideSVG: false,
   },
 };