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

Fetch all license plates outside of filter component

Browse Source 
If the swr call took a long time, the entire select component may not display. This change moves the fetch to the parent component (like sub labels).
This commit is contained in:
Josh Hawkins 2025-08-13 14:36:49 -05:00
parent c2f8de94e8
commit b78033702f
1 changed files with 9 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/components/overlay/dialog/SearchFilterDialog.tsx
View File

@ -64,6 +64,9 @@ export default function SearchFilterDialog({
const { t } = useTranslation(["components/filter"]); const { t } = useTranslation(["components/filter"]);
const [currentFilter, setCurrentFilter] = useState(filter ?? {}); const [currentFilter, setCurrentFilter] = useState(filter ?? {});
const { data: allSubLabels } = useSWR(["sub_labels", { split_joined: 1 }]); const { data: allSubLabels } = useSWR(["sub_labels", { split_joined: 1 }]);
const { data: allRecognizedLicensePlates } = useSWR<string[]>(
"recognized_license_plates",
);
useEffect(() => { useEffect(() => {
if (filter) { if (filter) {
@ -130,6 +133,7 @@ export default function SearchFilterDialog({
} }
/> />
<RecognizedLicensePlatesFilterContent <RecognizedLicensePlatesFilterContent
allRecognizedLicensePlates={allRecognizedLicensePlates}
recognizedLicensePlates={currentFilter.recognized_license_plate} recognizedLicensePlates={currentFilter.recognized_license_plate}
setRecognizedLicensePlates={(plate) => setRecognizedLicensePlates={(plate) =>
setCurrentFilter({ setCurrentFilter({
@ -875,6 +879,7 @@ export function SnapshotClipFilterContent({
} }
type RecognizedLicensePlatesFilterContentProps = { type RecognizedLicensePlatesFilterContentProps = {
allRecognizedLicensePlates: string[] | undefined;
recognizedLicensePlates: string[] | undefined; recognizedLicensePlates: string[] | undefined;
setRecognizedLicensePlates: ( setRecognizedLicensePlates: (
recognizedLicensePlates: string[] | undefined, recognizedLicensePlates: string[] | undefined,
@ -882,18 +887,12 @@ type RecognizedLicensePlatesFilterContentProps = {
}; };
export function RecognizedLicensePlatesFilterContent({ export function RecognizedLicensePlatesFilterContent({
allRecognizedLicensePlates,
recognizedLicensePlates, recognizedLicensePlates,
setRecognizedLicensePlates, setRecognizedLicensePlates,
}: RecognizedLicensePlatesFilterContentProps) { }: RecognizedLicensePlatesFilterContentProps) {
const { t } = useTranslation(["components/filter"]); const { t } = useTranslation(["components/filter"]);
const { data: allRecognizedLicensePlates, error } = useSWR<string[]>(
"recognized_license_plates",
{
revalidateOnFocus: false,
},
);
const [selectedRecognizedLicensePlates, setSelectedRecognizedLicensePlates] = const [selectedRecognizedLicensePlates, setSelectedRecognizedLicensePlates] =
useState<string[]>(recognizedLicensePlates || []); useState<string[]>(recognizedLicensePlates || []);
const [inputValue, setInputValue] = useState(""); const [inputValue, setInputValue] = useState("");
@ -923,7 +922,7 @@ export function RecognizedLicensePlatesFilterContent({
} }
}; };
if (!allRecognizedLicensePlates || allRecognizedLicensePlates.length === 0) { if (allRecognizedLicensePlates && allRecognizedLicensePlates.length === 0) {
return null; return null;
} }
@ -947,15 +946,11 @@ export function RecognizedLicensePlatesFilterContent({
<div className="overflow-x-hidden"> <div className="overflow-x-hidden">
<DropdownMenuSeparator className="mb-3" /> <DropdownMenuSeparator className="mb-3" />
<div className="mb-3 text-lg">{t("recognizedLicensePlates.title")}</div> <div className="mb-3 text-lg">{t("recognizedLicensePlates.title")}</div>
{error ? ( {allRecognizedLicensePlates == undefined ? (
<p className="text-sm text-red-500">
{t("recognizedLicensePlates.loadFailed")}
</p>
) : !allRecognizedLicensePlates ? (
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{t("recognizedLicensePlates.loading")} {t("recognizedLicensePlates.loading")}
</p> </p>
) : ( ) : allRecognizedLicensePlates.length === 0 ? null : (
<> <>
<Command <Command
className="border border-input bg-background" className="border border-input bg-background"