Fix flickering issues

src/components/widgets/Search.tsx

@@ -1,20 +1,21 @@
-import { createComputed, createMemo, createSignal } from 'solid-js';
+import { Resource, createMemo, createSignal } from 'solid-js';
-import { createSearchProviders } from '~/api/get-search-providers';
-
-import style from './Search.module.css';
 import { SearchProvider } from '~/types';
 
-export function Search() {
+import style from './Search.module.css';
+
+type SearchProps = {
+  providers: Resource<SearchProvider[]>;
+};
+
+export function Search(props: SearchProps) {
   const [term, setTerm] = createSignal('');
 
-  const searchProviders = createSearchProviders();
-
   const defaultProvider = createMemo(
-    () => searchProviders()?.find((provider) => provider.default) ?? searchProviders()?.[0]
+    () => props.providers()?.find((provider) => provider.default) ?? props.providers()?.[0]
   );
 
   const searchPerPrefix = createMemo(() =>
-    searchProviders()?.reduce<Record<string, SearchProvider>>((acc, provider) => {
+    props.providers()?.reduce<Record<string, SearchProvider>>((acc, provider) => {
       acc[provider.prefix] = provider;
       return acc;
     }, {})

src/routes/index.tsx

@@ -1,13 +1,17 @@
 import { createSignal, onCleanup, onMount } from 'solid-js';
 import { createApps } from '~/api/get-apps';
+import { createSearchProviders } from '~/api/get-search-providers';
 import { AppList } from '~/components/apps/AppList';
 import { DateView } from '~/components/widgets/Date';
 import { Search } from '~/components/widgets/Search';
 import { Weather } from '~/components/widgets/Weather';
 import { Sidebar } from '../components/ui/Sidebar';
+
 import style from './index.module.css';
 
 export default function Home() {
+  const searchProviders = createSearchProviders();
+
   onMount(() => {
     parent.addEventListener('keydown', handleKeypress);
   });
@@ -69,7 +73,7 @@ export default function Home() {
           ) : (
             <>
               <DateView />
-              <Search />
+              <Search providers={searchProviders} />
               <Weather />
             </>
           )}