Search bar fixes and performance updates

This commit is contained in:
Sean Edmunds
2026-01-08 12:53:50 -06:00
parent 38285943cd
commit 93ea28f968
20 changed files with 376 additions and 543 deletions

View File

@@ -38,6 +38,8 @@ const ApplicationSettings = () => {
index: 0,
enabled: 1,
};
const [searchValue, setSearchValue] = useState<string | number>('');
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
const form = useForm({
initialValues: defaultApplication,
validate: {
@@ -49,19 +51,21 @@ const ApplicationSettings = () => {
});
const appsEndpoint = 'api/applications';
const appsOrderEndpoint = 'api/applicationOrder';
const {
data: applicationData,
isFetched: applicationDataIsFetched,
isFetching: applicationDataIsFetching,
} = useQueryAPI({
const { data: applicationData, isFetching: applicationDataIsFetching } = useQueryAPI({
endpoint: appsEndpoint,
});
const [applications, setApplications] = useState<Application[]>([]);
const applications: Application[] =
applicationData
.filter(
(a: Application) =>
a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
a.url.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
a.baseUrl.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
)
.sort((a: Application, b: Application) => (a.index > b.index ? 1 : -1)) || [];
const [applicationList, setApplicationList] = useState<Application[]>([]);
const { isMobile, reorder, theme } = useCommonHooks();
const { mutateAsync } = useMutationAPI();
const [searchValue, setSearchValue] = useState<string | number>('');
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
const [dragging, setDragging] = useState(false);
const [isOpen, setIsOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
@@ -93,22 +97,10 @@ const ApplicationSettings = () => {
form.reset();
};
useEffect(() => {
if (applicationData && applicationDataIsFetched) {
setApplications(
applicationData
.filter(
(a: Application) =>
a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
a.url.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
a.baseUrl.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
)
.sort((a: Application, b: Application) => (a.index > b.index ? 1 : -1)),
);
}
if (debouncedSearch === searchValue) {
setIsLoading(false);
}
}, [applicationData, applicationDataIsFetched, debouncedSearch]);
}, [debouncedSearch]);
useEffect(() => {
if (applicationList.length > 0 && applicationList !== applications) {