administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-15 15:45:27 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Add loading indicator when explore view is revalidating

Browse Source
This commit is contained in:
Josh Hawkins 2024-09-30 07:31:42 -05:00
parent 775a3a1c22
commit ce8e19a442
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/views/explore/ExploreView.tsx
View File

@ -35,7 +35,12 @@ export default function ExploreView({
// data // data
const { data: events, mutate } = useSWR<SearchResult[]>( const {
data: events,
mutate,
isLoading,
isValidating,
} = useSWR<SearchResult[]>(
[ [
"events/explore", "events/explore",
{ {
@ -81,7 +86,7 @@ export default function ExploreView({
} }
}, [events, searchDetail, setSearchDetail]); }, [events, searchDetail, setSearchDetail]);
if (!events) { if (isLoading) {
return ( return (
<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 -translate-x-1/2 -translate-y-1/2" />
); );
@ -93,6 +98,7 @@ export default function ExploreView({
<ThumbnailRow <ThumbnailRow
key={label} key={label}
searchResults={filteredEvents} searchResults={filteredEvents}
isValidating={isValidating}
objectType={label} objectType={label}
setSearchDetail={setSearchDetail} setSearchDetail={setSearchDetail}
/> />
@ -104,12 +110,14 @@ export default function ExploreView({
type ThumbnailRowType = { type ThumbnailRowType = {
objectType: string; objectType: string;
searchResults?: SearchResult[]; searchResults?: SearchResult[];
isValidating: boolean;
setSearchDetail: (search: SearchResult | undefined) => void; setSearchDetail: (search: SearchResult | undefined) => void;
}; };
function ThumbnailRow({ function ThumbnailRow({
objectType, objectType,
searchResults, searchResults,
isValidating,
setSearchDetail, setSearchDetail,
}: ThumbnailRowType) { }: ThumbnailRowType) {
const navigate = useNavigate(); const navigate = useNavigate();
@ -123,7 +131,7 @@ function ThumbnailRow({
return ( return (
<div className="rounded-lg bg-background_alt p-2 md:px-4"> <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("_", " ")} {objectType.replaceAll("_", " ")}
{searchResults && ( {searchResults && (
<span className="ml-3 text-sm text-secondary-foreground"> <span className="ml-3 text-sm text-secondary-foreground">
@ -135,6 +143,7 @@ function ThumbnailRow({
tracked objects){" "} tracked objects){" "}
</span> </span>
)} )}
{isValidating && <ActivityIndicator className="ml-2 size-4" />}
</div> </div>
<div className="flex flex-row items-center space-x-2 py-2"> <div className="flex flex-row items-center space-x-2 py-2">
{searchResults?.map((event) => ( {searchResults?.map((event) => (