diff --git a/src/context/topics.tsx b/src/context/topics.tsx
index 53297d61..a577370b 100644
--- a/src/context/topics.tsx
+++ b/src/context/topics.tsx
@@ -5,9 +5,9 @@ import {
   createContext,
   createEffect,
   createMemo,
-  createReaction,
   createSignal,
   on,
+  onMount,
   useContext
 } from 'solid-js'
 import { loadTopics } from '~/graphql/api/public'
@@ -163,21 +163,26 @@ export const TopicsProvider = (props: { children: JSX.Element }) => {
       }
     })
   }
-
   const [db, setDb] = createSignal()
+  createEffect(
+    on(
+      () => window?.indexedDB,
+      async (_raw) => {
+        const initialized = await setupIndexedDB()
+        setDb(initialized)
+      },
+      { defer: true }
+    )
+  )
 
   const loadAllTopics = async () => {
     const topicsLoader = loadTopics()
     const ttt = await topicsLoader()
+    ttt && addTopics(ttt)
     if (db()) await saveTopicsToIndexedDB(db() as IDBDatabase, ttt as Topic[])
     return ttt || []
   }
 
-  createReaction(async () => {
-    setDb(await setupIndexedDB())
-    console.info('[context.topics] idb loaded')
-  })
-
   const [randomTopic, setRandomTopic] = createSignal<Topic>()
   createEffect(
     on(
@@ -198,6 +203,20 @@ export const TopicsProvider = (props: { children: JSX.Element }) => {
     )
   )
 
+  const getCachedOrLoadTopics = async () => {
+    const { topics: stored } = await getTopicsFromIndexedDB(db() as IDBDatabase)
+    if (stored) {
+      setSortedTopics(stored)
+      return stored
+    }
+    const loaded = await loadAllTopics()
+    if (loaded) setSortedTopics(loaded)
+    return loaded
+  }
+
+  // preload all topics
+  onMount(getCachedOrLoadTopics)
+
   const value: TopicsContextType = {
     setTopicsSort: setSortAllBy,
     topicEntities,
diff --git a/src/routes/(main).tsx b/src/routes/(main).tsx
index a2897f83..437bed88 100644
--- a/src/routes/(main).tsx
+++ b/src/routes/(main).tsx
@@ -1,8 +1,6 @@
 import { type RouteDefinition, type RouteSectionProps, createAsync } from '@solidjs/router'
-import { createEffect } from 'solid-js'
 import { LoadMoreItems, LoadMoreWrapper } from '~/components/_shared/LoadMoreWrapper'
 import { useFeed } from '~/context/feed'
-import { useTopics } from '~/context/topics'
 import { loadShouts, loadTopics } from '~/graphql/api/public'
 import { LoadShoutsOptions, Shout } from '~/graphql/schema/core.gen'
 import { HomeView, HomeViewProps } from '../components/Views/Home'
@@ -81,12 +79,6 @@ export default function HomePage(props: RouteSectionProps<HomeViewProps>) {
     topFeed: topRatedFeed
   } = useFeed()
 
-  // preload all topics
-  const { addTopics, sortedTopics } = useTopics()
-  createEffect(() => {
-    !sortedTopics() && props.data.topics && addTopics(props.data.topics)
-  })
-
   // load more faetured shouts
   const loadMoreFeatured = async (offset?: number) => {
     const shoutsLoader = featuredLoader(offset)