State management

src/pages/settings/components/Theming/Themes.tsx

@@ -6,6 +6,7 @@ import { FaDice } from 'react-icons/fa';
 import { FiChevronRight } from 'react-icons/fi';
 import { switchClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
+import NoItemsFound from '../Shared/NoItemsFound';
 import SettingsHeader from '../Shared/SettingsHeader';
 import ThemeCard from './ThemeCard';
 import ThemeModal from './ThemeModal';
@@ -13,9 +14,10 @@ import ThemeModal from './ThemeModal';
 function ThemesSettings() {
 	const themesEndpoint = 'api/themes';
 	const backgroundsEndpoint = 'api/backgrounds';
-	const { data: allThemeData } = useQueryAPI({
+	const { data: allThemeData, isFetched: isAllThemeDataFetched } = useQueryAPI({
 		endpoint: 'api/themes',
 	});
+	const [allThemes, setAllThemes] = useState<Theme[]>([]);
 	const { data: backgroundData, isFetched: isBackgroundFetched } = useQueryAPI({
 		endpoint: backgroundsEndpoint,
 	});
@@ -42,6 +44,7 @@ function ThemesSettings() {
 	const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
+	const [isLoading, setIsLoading] = useState(false);
 	const { currentTheme, setCurrentTheme, theme, isMobile, setCurrentThemePlaylist } =
 		useCommonHooks();
 
@@ -87,6 +90,19 @@ function ThemesSettings() {
 		}
 	}, [themePlaylistData]);
 
+	useEffect(() => {
+		if (allThemeData && isAllThemeDataFetched) {
+			setAllThemes(
+				allThemeData.filter((a: Theme) =>
+					a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
+				),
+			);
+		}
+		if (debouncedSearch === searchValue) {
+			setIsLoading(false);
+		}
+	}, [allThemeData, isAllThemeDataFetched, debouncedSearch]);
+
 	return (
 		<Stack w={'100%'} align='center'>
 			<ThemeModal
@@ -117,6 +133,8 @@ function ThemesSettings() {
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
 				searchPlaceholder={'Search Themes...'}
+				isLoading={isLoading}
+				setIsLoading={setIsLoading}
 			/>
 			<Switch
 				label={
@@ -150,7 +168,7 @@ function ThemesSettings() {
 				mb={isMobile ? '6rem' : '1rem'}
 			>
 				<Overlay
-					display={currentTheme === 'random' ? 'flex' : 'none'}
+					display={currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'}
 					blur={5}
 					style={{
 						zIndex: 190,
@@ -161,11 +179,8 @@ function ThemesSettings() {
 					}}
 					pos={'absolute'}
 				/>
-				{allThemeData
-					?.filter((a: Theme) =>
-						a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
-					)
-					.map((cardTheme: Theme) => (
+				{allThemes.length > 0 ? (
+					allThemes.map((cardTheme: Theme) => (
 						<Group key={cardTheme.name} pos={'relative'}>
 							{cardTheme.name === currentTheme && (
 								<FiChevronRight
@@ -198,7 +213,15 @@ function ThemesSettings() {
 								/>
 							</Box>
 						</Group>
-					))}
+					))
+				) : (
+					<Group
+						w={'100%'}
+						style={{ zIndex: 1000, display: 'flex', justifyContent: 'center' }}
+					>
+						<NoItemsFound />
+					</Group>
+				)}
 			</Group>
 		</Stack>
 	);