diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx index e8ab01b6a..8accfd18f 100644 --- a/web/src/pages/Explore.tsx +++ b/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 ( - setSearch(`similarity:${search.id}`)} - setSearchFilter={setSearchFilter} - onUpdateFilter={setSearchFilter} - loadMore={loadMore} - hasMore={!isReachingEnd} - /> + <> + {isSlowLoading && !similaritySearch ? ( +
+
+

Search Unavailable

+ +

+ If this is your first time using Search, be patient while Frigate + downloads the necessary embeddings models. Check Frigate logs. +

+
+
+ ) : ( + setSearch(`similarity:${search.id}`)} + setSearchFilter={setSearchFilter} + onUpdateFilter={setSearchFilter} + loadMore={loadMore} + hasMore={!isReachingEnd} + /> + )} + ); }