migrate frontend to use new celery api and improve ux around spinners whilst loading

crawler/frontend/src/App.tsx

@@ -8,6 +8,7 @@ import AlertError from './components/AlertError';
 import LoginModal from './components/LoginModal';
 import { Map } from './components/Map';
 import { Parameters, type ParameterValues } from './components/Parameters';
+import { Spinner } from './components/Spinner';
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from './components/ui/breadcrumb';
 import { Button } from './components/ui/button';
 import { Separator } from './components/ui/separator';
@@ -64,6 +65,7 @@ function App() {
   const [queryParameters, setQueryParameters] = useState<ParameterValues | null>(null);
   const [submitError, setSubmitError] = useState<string | null>(null);
   const [alertDialogIsOpen, setAlertDialogIsOpen] = useState(false);
+  const [spinnerText, setSpinnerText] = useState<string | null>(null);
 
   useEffect(() => {
     // Check if this is a callback from Authentik (after login)
@@ -88,27 +90,31 @@ function App() {
     setIsParametersModalOpen(false)
     let data = null;
     if (action === 'visualize') {
+      setSpinnerText("Loading data for visualization...")
       try {
         data = await fetchData(user, "/api/listing_geojson", parameters);
       } catch (error) {
         // @ts-expect-error
         setSubmitError(error.message)
         setAlertDialogIsOpen(true)
+      } finally {
+        setSpinnerText(null)
       }
       if (data) {
         setListingData(data);
       }
     } else if (action === 'fetch-data') {
+      setSpinnerText("Submitting query to refresh listings...")
       try {
         data = await fetchData(user, "/api/refresh_listings", parameters, 'POST');
+        // @ts-expect-error
+        setTaskID(data.task_id)
       } catch (error) {
         // @ts-expect-error
         setSubmitError(error.message)
         setAlertDialogIsOpen(true)
-      }
-      if (data) {
-        // @ts-expect-error
-        setTaskID(data.task_id)
+      } finally {
+        setSpinnerText(null)
       }
     }
     console.log(data)
@@ -146,6 +152,11 @@ function App() {
               <Parameters onSubmit={onSubmit} isOpen={isParametersModalOpen} setIsOpen={setIsParametersModalOpen} />
               <ActiveQuery taskID={taskID} />
               <AlertError message={submitError} open={alertDialogIsOpen} setIsOpen={setAlertDialogIsOpen} />
+
+              <Spinner show={spinnerText !== null} >
+                <span >{spinnerText}</span>
+              </Spinner>
+
             </div>
             {Object.keys(listingData).length > 0 &&
               <div className="flex-1 w-full relative" style={{ minHeight: 0, marginBottom: '8rem' }}>
@@ -153,9 +164,6 @@ function App() {
               </div>
             }
           </div>
-
-
-
         </SidebarInset>
       </SidebarProvider>
     </>