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

Add loading and no results indicators

Browse Source
This commit is contained in:
Nicolas Mowen 2024-06-22 07:13:14 -06:00
parent 4e4916c816
commit 031d16e591
1 changed files with 42 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/pages/Search.tsx
View File

@ -1,10 +1,11 @@
import SearchFilterGroup from "@/components/filter/SearchFilterGroup"; import SearchFilterGroup from "@/components/filter/SearchFilterGroup";
import ActivityIndicator from "@/components/indicators/activity-indicator";
import SearchThumbnailPlayer from "@/components/player/SearchThumbnailPlayer"; import SearchThumbnailPlayer from "@/components/player/SearchThumbnailPlayer";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Toaster } from "@/components/ui/sonner"; import { Toaster } from "@/components/ui/sonner";
import { SearchResult } from "@/types/search"; import { SearchResult } from "@/types/search";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { LuSearchCheck } from "react-icons/lu"; import { LuSearchCheck, LuSearchX } from "react-icons/lu";
import useSWR from "swr"; import useSWR from "swr";
export default function Search() { export default function Search() {
@ -27,9 +28,11 @@ export default function Search() {
setSearchTerm(search); setSearchTerm(search);
}, 500), }, 500),
); );
// we only want to update the searchTerm when search changes
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [search]); }, [search]);
const { data: searchResults } = useSWR<SearchResult[]>( const { data: searchResults, isLoading } = useSWR<SearchResult[]>(
searchTerm.length > 0 ? ["events/search", { query: searchTerm }] : null, searchTerm.length > 0 ? ["events/search", { query: searchTerm }] : null,
); );
@ -49,13 +52,25 @@ export default function Search() {
</div> </div>
<div className="no-scrollbar flex flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4"> <div className="no-scrollbar flex flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4">
{searchTerm == "" && ( {searchTerm.length == 0 && (
<div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center"> <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
<LuSearchCheck className="size-16" /> <LuSearchCheck className="size-16" />
Search For Detections Search For Detections
</div> </div>
)} )}
{searchTerm.length > 0 && searchResults?.length == 0 && (
<div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
<LuSearchX className="size-16" />
No Detections Found
</div>
)}
{isLoading && (
<ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
)}
<div className="grid w-full gap-2 px-1 sm:grid-cols-2 md:mx-2 md:grid-cols-3 md:gap-4 3xl:grid-cols-4">
{searchResults && {searchResults &&
searchResults.map((value) => { searchResults.map((value) => {
const selected = false; const selected = false;
@ -84,5 +99,6 @@ export default function Search() {
})} })}
</div> </div>
</div> </div>
</div>
); );
} }