From ce8e19a44257facfa5897276261a31f222fafd8b Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 30 Sep 2024 07:31:42 -0500
Subject: [PATCH] Add loading indicator when explore view is revalidating

---
 web/src/views/explore/ExploreView.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/web/src/views/explore/ExploreView.tsx b/web/src/views/explore/ExploreView.tsx
index f3fb330b0..8fd75ae49 100644
--- a/web/src/views/explore/ExploreView.tsx
+++ b/web/src/views/explore/ExploreView.tsx
@@ -35,7 +35,12 @@ export default function ExploreView({
 
   // data
 
-  const { data: events, mutate } = useSWR<SearchResult[]>(
+  const {
+    data: events,
+    mutate,
+    isLoading,
+    isValidating,
+  } = useSWR<SearchResult[]>(
     [
       "events/explore",
       {
@@ -81,7 +86,7 @@ export default function ExploreView({
     }
   }, [events, searchDetail, setSearchDetail]);
 
-  if (!events) {
+  if (isLoading) {
     return (
       <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
     );
@@ -93,6 +98,7 @@ export default function ExploreView({
         <ThumbnailRow
           key={label}
           searchResults={filteredEvents}
+          isValidating={isValidating}
           objectType={label}
           setSearchDetail={setSearchDetail}
         />
@@ -104,12 +110,14 @@ export default function ExploreView({
 type ThumbnailRowType = {
   objectType: string;
   searchResults?: SearchResult[];
+  isValidating: boolean;
   setSearchDetail: (search: SearchResult | undefined) => void;
 };
 
 function ThumbnailRow({
   objectType,
   searchResults,
+  isValidating,
   setSearchDetail,
 }: ThumbnailRowType) {
   const navigate = useNavigate();
@@ -123,7 +131,7 @@ function ThumbnailRow({
 
   return (
     <div className="rounded-lg bg-background_alt p-2 md:px-4">
-      <div className="text-lg capitalize">
+      <div className="flex flex-row items-center text-lg capitalize">
         {objectType.replaceAll("_", " ")}
         {searchResults && (
           <span className="ml-3 text-sm text-secondary-foreground">
@@ -135,6 +143,7 @@ function ThumbnailRow({
             tracked objects){" "}
           </span>
         )}
+        {isValidating && <ActivityIndicator className="ml-2 size-4" />}
       </div>
       <div className="flex flex-row items-center space-x-2 py-2">
         {searchResults?.map((event) => (