Display warning when search embeddings models are being downloaded (#…

…13840)

web/src/pages/Explore.tsx

@@ -3,6 +3,7 @@ import { useSearchEffect } from "@/hooks/use-overlay-state";
 import { SearchFilter, SearchQuery, SearchResult } from "@/types/search";
 import SearchView from "@/views/search/SearchView";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { TbExclamationCircle } from "react-icons/tb";
 import useSWRInfinite from "swr/infinite";
 
 const API_LIMIT = 25;
@@ -116,10 +117,14 @@ export default function Explore() {
 
  // paging
 
+ // usually slow only on first run while downloading models
+ const [isSlowLoading, setIsSlowLoading] = useState(false);
+
  const getKey = (
  pageIndex: number,
  previousPageData: SearchResult[] | null,
  ): SearchQuery => {
+ if (isSlowLoading && !similaritySearch) return null;
  if (previousPageData && !previousPageData.length) return null; // reached the end
  if (!searchQuery) return null;
 
@@ -143,6 +148,12 @@ export default function Explore() {
  {
  revalidateFirstPage: true,
  revalidateAll: false,
+ onLoadingSlow: () => {
+ if (!similaritySearch) {
+ setIsSlowLoading(true);
+ }
+ },
+ loadingTimeout: 10000,
  },
  );
 
@@ -174,18 +185,33 @@ export default function Explore() {
  }, [isReachingEnd, isLoadingMore, setSize, size, searchResults, searchQuery]);
 
  return (
- <SearchView
- search={search}
- searchTerm={searchTerm}
- searchFilter={searchFilter}
- searchResults={searchResults}
- isLoading={(isLoadingInitialData || isLoadingMore) ?? true}
- setSearch={setSearch}
- setSimilaritySearch={(search) => setSearch(`similarity:${search.id}`)}
- setSearchFilter={setSearchFilter}
- onUpdateFilter={setSearchFilter}
- loadMore={loadMore}
- hasMore={!isReachingEnd}
- />
+ <>
+ {isSlowLoading && !similaritySearch ? (
+ <div className="absolute inset-0 left-1/2 top-1/2 flex h-96 w-96 -translate-x-1/2 -translate-y-1/2">
+ <div className="flex flex-col items-center justify-center rounded-lg bg-background/50 p-5">
+ <p className="my-5 text-lg">Search Unavailable</p>
+ <TbExclamationCircle className="mb-3 size-10" />
+ <p className="max-w-96 text-center">
+ If this is your first time using Search, be patient while Frigate
+ downloads the necessary embeddings models. Check Frigate logs.
+ </p>
+ </div>
+ </div>
+ ) : (
+ <SearchView
+ search={search}
+ searchTerm={searchTerm}
+ searchFilter={searchFilter}
+ searchResults={searchResults}
+ isLoading={(isLoadingInitialData || isLoadingMore) ?? true}
+ setSearch={setSearch}
+ setSimilaritySearch={(search) => setSearch(`similarity:${search.id}`)}
+ setSearchFilter={setSearchFilter}
+ onUpdateFilter={setSearchFilter}
+ loadMore={loadMore}
+ hasMore={!isReachingEnd}
+ />
+ )}
+ </>
  );
 }