feat(spinner): introduce a busy bar

this is a great component to use with the useViewLoading hook above an esri.Map component

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,
+  },
+};

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>
+  );
+};