refactor

src/components/ui/sidebar.tsx

@@ -1,12 +1,12 @@
 import { Box, Tooltip } from '@mantine/core';
 import { IconPlayerPlay } from '@tabler/icons-react';
 import { useSetAtom } from 'jotai';
-import { useEffect, useState } from 'react';
 import { onNextBackgroundAtom } from '~/atoms';
 import { FavoriteBackground } from '../widgets/favorite-background';
 import { Settings } from '../widgets/settings';
 import { WeatherWidget } from '../widgets/weather-widget';
 
+import { useLoadingTimeout } from '~/hooks/use-loading-timeout';
 import style from './sidebar.module.css';
 
 type SidebarProps = {
@@ -20,11 +20,7 @@ export function Sidebar({ categories, activeCategory, selectCategory }: SidebarP
 
   const onNextBackground = useSetAtom(onNextBackgroundAtom);
 
-  const [isInitialLoading, setIsInitialLoading] = useState(true);
-
-  useEffect(() => {
-    setTimeout(() => setIsInitialLoading(false), 200);
-  }, []);
+  const isInitialLoading = useLoadingTimeout();
 
   return (
     <div className={`${style.Sidebar} ${isInitialLoading ? style.Loading : ''}`}>

src/hooks/use-loading-timeout.ts

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+
+export function useLoadingTimeout() {
+  const [isInitialLoading, setIsInitialLoading] = useState(true);
+
+  useEffect(() => {
+    setTimeout(() => setIsInitialLoading(false), 200);
+  }, []);
+
+  return isInitialLoading;
+}

src/pages/index-page.tsx

@@ -9,42 +9,37 @@ import { CurrentImageWidget } from '~/components/widgets/current-image-widget';
 import { DateWidget } from '~/components/widgets/date-widget';
 import { SearchWidget } from '~/components/widgets/search-widget';
 import { useActiveCategory } from '~/hooks/use-active-category';
+import { useLoadingTimeout } from '~/hooks/use-loading-timeout';
 
 import style from './index-page.module.css';
 
 export function IndexPage() {
+  const { categories, apps } = useCategories();
   const searchProviders = useSearchProviders();
+
+  const { showImageDetails } = useAtomValue(settingsAtom);
+  const onNextBackground = useSetAtom(onNextBackgroundAtom);
+
   const [searchTerm, setSearchTerm] = useState('');
   const shouldSearchLocally = searchTerm && !searchTerm.startsWith('!');
 
-  const { showImageDetails } = useAtomValue(settingsAtom);
+  const isInitialLoading = useLoadingTimeout();
 
-  const onNextBackground = useSetAtom(onNextBackgroundAtom);
-
-  const { categories, apps } = useCategories();
-
-  const { activeCategory, selectCategory, resetCategory } = useActiveCategory();
-  const activeCategoryDef = categories?.find((c) => c.name === activeCategory);
+  const { activeCategory: activeCategoryName, selectCategory, resetCategory } = useActiveCategory();
+  const activeCategory = categories?.find((c) => c.name === activeCategoryName);
 
   const searchResults = useMemo(() => {
-    if (!shouldSearchLocally) {
+    if (!shouldSearchLocally || !apps) {
       return [];
     }
 
-    return (
-      apps?.filter(
-        (app) =>
-          app.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          app.url.toLowerCase().includes(searchTerm.toLowerCase())
-      ) ?? []
+    return apps.filter(
+      ({ name, url }) =>
+        name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        url.toLowerCase().includes(searchTerm.toLowerCase())
     );
   }, [apps, searchTerm, shouldSearchLocally]);
 
-  const [isInitialLoading, setIsInitialLoading] = useState(true);
-  useEffect(() => {
-    setTimeout(() => setIsInitialLoading(false), 200);
-  }, []);
-
   useEffect(() => {
     parent.addEventListener('keydown', handleKeypress);
 
@@ -89,14 +84,14 @@ export function IndexPage() {
       <Sidebar
         categories={categories?.flatMap((c) => c.name)}
         selectCategory={selectCategory}
-        activeCategory={activeCategory}
+        activeCategory={activeCategoryName}
       />
       <div className={style.ContentWrapper}>
         <div className={style.Widgets}>
           {activeCategory ? (
             <AppList
-              category={activeCategoryDef?.name ?? ''}
-              apps={activeCategoryDef?.apps ?? []}
+              category={activeCategory.name}
+              apps={activeCategory.apps}
               onReset={resetCategory}
             />
           ) : (