Misc fixes (#14064)

* Add loading indicator when explore view is revalidating

* Portal tooltip in object lifecycle pane

* Better config file handling

* Only manually set aspect ratio when using alert videos

web/src/components/card/AnimatedEventCard.tsx

@@ -109,7 +109,7 @@ export function AnimatedEventCard({
         <div
           className="relative h-24 4k:h-32"
           style={{
-            aspectRatio: aspectRatio,
+            aspectRatio: alertVideos ? aspectRatio : undefined,
           }}
           onMouseEnter={isDesktop ? () => setIsHovered(true) : undefined}
           onMouseLeave={isDesktop ? () => setIsHovered(false) : undefined}

web/src/components/overlay/detail/ObjectLifecycle.tsx

@@ -334,7 +334,9 @@ export default function ObjectLifecycle({
                 />
               </Button>
             </TooltipTrigger>
-            <TooltipContent>Adjust annotation settings</TooltipContent>
+            <TooltipPortal>
+              <TooltipContent>Adjust annotation settings</TooltipContent>
+            </TooltipPortal>
           </Tooltip>
         </div>
       </div>

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) => (