From 8f98ea0ca717d77271bbc787c8daf942dd59f70d Mon Sep 17 00:00:00 2001
From: steveoh <sgourley@utah.gov>
Date: Wed, 6 Nov 2024 16:35:40 -0700
Subject: [PATCH] feat(spinner): introduce a busy bar

this is a great component to use with the useViewLoading hook above an esri.Map component
---
 .../src/components/Spinner.stories.tsx        | 13 +++++++-
 .../src/components/Spinner.tsx                | 30 ++++++++++++++++---
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/packages/utah-design-system/src/components/Spinner.stories.tsx b/packages/utah-design-system/src/components/Spinner.stories.tsx
index be6317be..8e123ecf 100644
--- a/packages/utah-design-system/src/components/Spinner.stories.tsx
+++ b/packages/utah-design-system/src/components/Spinner.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta } from '@storybook/react';
-import { Spinner as Component } from './Spinner';
+import { BusyBar, Spinner as Component } from './Spinner.tsx';
 
 const meta: Meta<typeof Component> = {
   component: Component,
@@ -14,3 +14,14 @@ const meta: Meta<typeof Component> = {
 export default meta;
 
 export const Example = {};
+
+export const BarExample = {
+  render: (args: { busy?: boolean }) => (
+    <div className="relative isolate min-w-96">
+      <BusyBar {...args} />
+    </div>
+  ),
+  args: {
+    busy: true,
+  },
+};
diff --git a/packages/utah-design-system/src/components/Spinner.tsx b/packages/utah-design-system/src/components/Spinner.tsx
index 8a95f693..44c6f98f 100644
--- a/packages/utah-design-system/src/components/Spinner.tsx
+++ b/packages/utah-design-system/src/components/Spinner.tsx
@@ -1,12 +1,16 @@
+import { useProgressBar } from 'react-aria';
+
 export const Spinner = () => {
+  const { progressBarProps } = useProgressBar({
+    isIndeterminate: true,
+  });
+
   return (
     <svg
+      {...progressBarProps}
       className="h-full shrink-0 motion-safe:animate-spin"
       fill="none"
-      role="progressbar"
-      aria-live="polite"
-      aria-hidden="false"
-      aria-valuetext="loading"
+      aria-label="Loading…"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       width="18"
@@ -37,3 +41,21 @@ Spinner.minDelay = async (promise: Promise<any>, ms = 2500) => {
 
   return promise;
 };
+
+export const BusyBar = ({ busy }: { busy?: boolean }) => {
+  const { progressBarProps } = useProgressBar({
+    isIndeterminate: true,
+  });
+
+  if (!busy) {
+    return null;
+  }
+
+  return (
+    <div
+      {...progressBarProps}
+      aria-label="Loading…"
+      className="absolute inset-x-0 top-0 z-[1] h-2 w-full min-w-full animate-gradient-x bg-gradient-to-r from-secondary-700/90 from-30% via-accent-400/90 to-primary-800/90 to-70% transition-all duration-700 ease-in-out"
+    ></div>
+  );
+};