UI tweaks (#14719)

* Show activity indicator when search grid is revalidating

* improve frigate+ button title grammar

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>
                       </>
                     )}

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>
             </>
           )}

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}

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 && (