Fix filter functionality and performance

src/components/shared/TableFilterProfiles.tsx

@@ -7,6 +7,9 @@ import {
 	createFilterProfile,
 	removeFilterProfile,
 } from "../../slices/tableFilterProfilesSlice";
+import {
+	goToPage,
+} from "../../thunks/tableThunks";
 import { getFilters } from "../../selectors/tableFilterSelectors";
 import { loadFilterProfile } from "../../slices/tableFilterSlice";
 import { useAppDispatch, useAppSelector } from "../../store";
@@ -115,9 +118,12 @@ const TableFiltersProfiles = ({
 	const chooseFilterProfile = (filterMap) => {
 		dispatch(loadFilterProfile(filterMap));
 
-		// Reload resources when filters are removed
-		loadResource();
-		loadResourceIntoTable();
+		// No matter what, we go to page one.
+		dispatch(goToPage(0)).then(async () => {
+			// Reload resources when filters are removed
+			await loadResource();
+			loadResourceIntoTable();
+		});
 	};
 
 	return (

src/components/shared/TableFilters.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
@@ -18,6 +18,9 @@ import {
 	removeTextFilter,
 	resetFilterValues,
 } from "../../slices/tableFilterSlice";
+import {
+	goToPage,
+} from "../../thunks/tableThunks";
 import TableFilterProfiles from "./TableFilterProfiles";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
 import { getResourceType } from "../../selectors/tableSelectors";
@@ -47,6 +50,7 @@ const TableFilters = ({
 	// Variables for showing different dialogs depending on what was clicked
 	const [showFilterSelector, setFilterSelector] = useState(false);
 	const [showFilterSettings, setFilterSettings] = useState(false);
+	const [itemValue, setItemValue] = React.useState("");
 
 	// Variables containing selected start date and end date for date filter
 	const [startDate, setStartDate] = useState<Date | undefined>(undefined);
@@ -86,36 +90,60 @@ const TableFilters = ({
 		loadResourceIntoTable();
 	};
 
-	// Handle changes when a item of the component is clicked
-// @ts-expect-error TS(7006): Parameter 'e' implicitly has an 'any' type.
-	const handleChange = async (e) => {
-		const itemName = e.target.name;
-		const itemValue = e.target.value;
+	// Handle changes when an item of the component is changed
+	// @ts-expect-error TS(7006): Parameter 'e' implicitly has an 'any' type.
+	const handleChange = (e) => {
+		let targetName = e.target.name;
+		let targetValue = e.target.value;
 
-		if (itemName === "textFilter") {
-			dispatch(editTextFilter(itemValue));
+		let mustApplyChanges = false;
+		if (targetName === "textFilter") {
+			dispatch(editTextFilter(targetValue));
+			mustApplyChanges = true;
 		}
 
-		if (itemName === "selectedFilter") {
-			dispatch(editSelectedFilter(itemValue))
+		if (targetName === "selectedFilter") {
+			dispatch(editSelectedFilter(targetValue));
 		}
 
 		// If the change is in secondFilter (filter is picked) then the selected value is saved in filterMap
 		// and the filter selections are cleared
-		if (itemName === "secondFilter") {
+		if (targetName === "secondFilter") {
 			let filter = filterMap.find(({ name }) => name === selectedFilter);
 			if (!!filter) {
-				dispatch(editFilterValue({filterName: filter.name, value: itemValue}));
+				dispatch(editFilterValue({filterName: filter.name, value: targetValue}));
 				setFilterSelector(false);
 				dispatch(removeSelectedFilter());
 				dispatch(removeSecondFilter());
+				mustApplyChanges = true;
 			}
 		}
-		// Reload of resource
-		await loadResource();
-		loadResourceIntoTable();
+
+		if (mustApplyChanges) {
+			setItemValue(e.target.value);
+		}
 	};
 
+	// Apply the filter changes (in debounced) accomulated in handleChange,
+	// simply by going to first page and then load resources.
+	// This helps increase performance by reducing the number of calls to load resources.
+	const applyFilterChangesDebounced = async () => {
+		// No matter what, we go to page one.
+		dispatch(goToPage(0)).then(async () => {
+			// Reload of resource
+			await loadResource();
+			loadResourceIntoTable();
+		});
+	};
+
+	useEffect(() => {
+		// Call to apply filter changes with 500MS debounce!
+		let applyFilterChangesDebouncedTimeoutId = setTimeout(applyFilterChangesDebounced, 500);
+
+		return () => clearTimeout(applyFilterChangesDebouncedTimeoutId);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [itemValue]);
+
 	// Set the sate of startDate and endDate picked with datepicker
 	const handleDatepickerChange = async (date: Date | null, isStart = false) => {
 		if (date === null) {
@@ -167,9 +195,11 @@ const TableFilters = ({
 				}));
 				setFilterSelector(false);
 				dispatch(removeSelectedFilter());
-				// Reload of resource
-				await loadResource();
-				loadResourceIntoTable();
+				// Reload of resource after going to very first page.
+				dispatch(goToPage(0)).then(async () => {
+					await loadResource();
+					loadResourceIntoTable();
+				});
 			}
 		}