Standardization

src/pages/settings/components/Search/SearchHistory.tsx

@@ -9,7 +9,11 @@ import type { SearchHistoryItem } from 'types';
 
 const SearchHistory = () => {
 	const searchEndpoint = 'api/searchHistory';
-	const { data: historyData, isFetched: historyDataIsFetched } = useQueryAPI({
+	const {
+		data: historyData,
+		isFetched: historyDataIsFetched,
+		isFetching: historyDataIsFetching,
+	} = useQueryAPI({
 		endpoint: searchEndpoint,
 	});
 	const [searchHistory, setSearchHistory] = useState<SearchHistoryItem[]>([]);
@@ -92,7 +96,7 @@ const SearchHistory = () => {
 				align='center'
 			>
 				<Stack h={'calc(100vh - 14rem)'} w={'100%'} p={'1rem'} pt={0} mt={'1rem'} gap={0}>
-					<Stack style={{ overflow: 'scroll', whiteSpace: 'none' }}>
+					<Stack h={'inherit'} style={{ overflow: 'scroll', whiteSpace: 'none' }}>
 						<DataTable
 							data={searchHistory}
 							columns={SearchHistoryColumns(
@@ -106,6 +110,7 @@ const SearchHistory = () => {
 							filtersEnabled={filtersEnabled}
 							globalFilter={globalFilter}
 							setGlobalFilter={setGlobalFilter}
+							isRefreshing={historyDataIsFetching}
 						/>
 					</Stack>
 				</Stack>

src/pages/settings/components/Search/SearchProviders.tsx

@@ -6,6 +6,7 @@ import {
 	Grid,
 	GridCol,
 	Group,
+	LoadingOverlay,
 	Popover,
 	Select,
 	Stack,
@@ -51,11 +52,15 @@ const SearchProviderSettings = () => {
 		},
 	});
 	const endpoint = 'api/providers';
-	const { data: providerData, isFetched: providerDataIsFetched } = useQueryAPI({
+	const {
+		data: providerData,
+		isFetched: providerDataIsFetched,
+		isFetching: providerDataIsFetching,
+	} = useQueryAPI({
 		endpoint: endpoint,
 	});
 	const [providers, setProviders] = useState<Provider[]>([]);
-	const { isMobile, theme, filter } = useCommonHooks();
+	const { isMobile, theme, iconFilter } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [searchValue, setSearchValue] = useState('');
@@ -273,6 +278,16 @@ const SearchProviderSettings = () => {
 				w={'100%'}
 				align='center'
 			>
+				<LoadingOverlay
+					visible={providerDataIsFetching}
+					zIndex={180}
+					overlayProps={{ blur: 5 }}
+					loaderProps={{
+						color: 'var(--mantine-color-primary-0)',
+						type: 'bars',
+						size: 'xl',
+					}}
+				/>
 				<Grid columns={18} w={'75%'}>
 					{providers.length > 0 ? (
 						providers?.map((provider: Provider) => (
@@ -291,7 +306,7 @@ const SearchProviderSettings = () => {
 											<SearchProviderSettingsItem
 												provider={provider}
 												Icon={allIcons[provider.icon || '']}
-												filter={filter}
+												filter={iconFilter}
 											/>
 										</Box>
 									</Popover.Target>