fix: switch out placeholder for UDS busy bar

agrc · Nov 29, 2024 · c594c62 · c594c62
1 parent f1c9af2
commit c594c62
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -41,7 +41,8 @@
     "@heroicons/react": "^2.1.5",
     "@tanstack/react-query": "^5.59.19",
     "@ugrc/layer-selector": "^6.2.9",
-    "@ugrc/utah-design-system": "^1.13.0",
+    "@ugrc/tailwind-preset": "^1.1.0",
+    "@ugrc/utah-design-system": "^1.14.0",
     "@ugrc/utilities": "^2.2.7",
     "firebase": "^11.0.1",
     "immer": "^10.1.1",

diff --git a/src/components/MapContainer.tsx b/src/components/MapContainer.tsx
@@ -8,7 +8,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useMap } from './hooks';
 
 import '@ugrc/layer-selector/src/LayerSelector.css';
-import { Spinner } from '@ugrc/utah-design-system';
+import { BusyBar } from '@ugrc/utah-design-system';
 import config from '../config';
 
 type LayerFactory = {
@@ -111,9 +111,9 @@ export const MapContainer = ({
   return (
     <div ref={mapNode} className="size-full">
       {selectorOptions?.view && <LayerSelector {...selectorOptions}></LayerSelector>}
-      {mapView.current && isDrawing && (
-        <div className="absolute left-[22px] top-[90px]">
-          <Spinner />
+      {mapView.current && (
+        <div className="absolute left-0 right-0 top-0">
+          <BusyBar busy={isDrawing} />
         </div>
       )}
     </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,3 +1,5 @@
+import ugrcPreset from '@ugrc/tailwind-preset';
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./node_modules/@ugrc/**/*.{tsx,jsx,js}', './index.html', './src/**/*.{tsx,jsx,js}'],
@@ -51,4 +53,5 @@ export default {
     },
   },
   plugins: [],
+  presets: [ugrcPreset],
 };