From 8c2c07fd18ea68d6da1b72ebd1307a556767c2ff Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 1 Nov 2024 07:37:52 -0500
Subject: [PATCH] UI tweaks (#14719)

* Show activity indicator when search grid is revalidating

* improve frigate+ button title grammar
---
 web/src/components/overlay/detail/SearchDetailDialog.tsx | 8 ++++++--
 web/src/components/overlay/dialog/FrigatePlusDialog.tsx  | 6 ++++--
 web/src/pages/Explore.tsx                                | 4 +++-
 web/src/views/search/SearchView.tsx                      | 5 ++---
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/web/src/components/overlay/detail/SearchDetailDialog.tsx b/web/src/components/overlay/detail/SearchDetailDialog.tsx
index 1ff784e6d..f158df329 100644
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@@ -655,7 +655,9 @@ function ObjectSnapshotTab({
                             onSubmitToPlus(false);
                           }}
                         >
-                          This is a {search?.label}
+                          This is{" "}
+                          {/^[aeiou]/i.test(search?.label || "") ? "an" : "a"}{" "}
+                          {search?.label}
                         </Button>
                         <Button
                           className="text-white"
@@ -666,7 +668,9 @@ function ObjectSnapshotTab({
                             onSubmitToPlus(true);
                           }}
                         >
-                          This is not a {search?.label}
+                          This is not{" "}
+                          {/^[aeiou]/i.test(search?.label || "") ? "an" : "a"}{" "}
+                          {search?.label}
                         </Button>
                       </>
                     )}
diff --git a/web/src/components/overlay/dialog/FrigatePlusDialog.tsx b/web/src/components/overlay/dialog/FrigatePlusDialog.tsx
index 18ada20fc..e98a4164a 100644
--- a/web/src/components/overlay/dialog/FrigatePlusDialog.tsx
+++ b/web/src/components/overlay/dialog/FrigatePlusDialog.tsx
@@ -144,7 +144,8 @@ export function FrigatePlusDialog({
                   onSubmitToPlus(false);
                 }}
               >
-                This is a {upload?.label}
+                This is {/^[aeiou]/i.test(upload?.label || "") ? "an" : "a"}{" "}
+                {upload?.label}
               </Button>
               <Button
                 className="text-white"
@@ -155,7 +156,8 @@ export function FrigatePlusDialog({
                   onSubmitToPlus(true);
                 }}
               >
-                This is not a {upload?.label}
+                This is not {/^[aeiou]/i.test(upload?.label || "") ? "an" : "a"}{" "}
+                {upload?.label}
               </Button>
             </>
           )}
diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx
index 8989c7b05..9f80241c1 100644
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@@ -428,7 +428,9 @@ export default function Explore() {
           searchTerm={searchTerm}
           searchFilter={searchFilter}
           searchResults={searchResults}
-          isLoading={(isLoadingInitialData || isLoadingMore) ?? true}
+          isLoading={
+            (isLoadingInitialData || isLoadingMore || isValidating) ?? true
+          }
           hasMore={!isReachingEnd}
           columns={gridColumns}
           defaultView={defaultView}
diff --git a/web/src/views/search/SearchView.tsx b/web/src/views/search/SearchView.tsx
index 4d81a40f7..cf6640f18 100644
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@@ -397,11 +397,10 @@ export default function SearchView({
           </div>
         )}
 
-        {uniqueResults?.length == 0 &&
-          isLoading &&
+        {isLoading &&
           (searchTerm ||
             (searchFilter && Object.keys(searchFilter).length !== 0)) && (
-            <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+            <ActivityIndicator className="absolute left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 rounded-2xl bg-background/80 p-3 dark:bg-background/50" />
           )}
 
         {uniqueResults && (