load Random Topics on Mount

src/components/Views/Topic.tsx

@@ -59,7 +59,7 @@ export const TopicView = (props: Props) => {
     }
   })
 
-  const loadRandomTopArticles = async (topic: string) => {
+  const loadFavoriteTopArticles = async (topic: string) => {
     const options: LoadShoutsOptions = {
       filters: { featured: true, topic: topic },
       limit: 10,
@@ -69,7 +69,7 @@ export const TopicView = (props: Props) => {
     setFavoriteTopArticles(result)
   }
 
-  const loadRandomTopMonthArticles = async (topic: string) => {
+  const loadReactedTopMonthArticles = async (topic: string) => {
     const now = new Date()
     const after = getUnixtime(new Date(now.setMonth(now.getMonth() - 1)))
 
@@ -80,16 +80,21 @@ export const TopicView = (props: Props) => {
     }
 
     const result = await apiClient.getRandomTopShouts({ options })
+
     setReactedTopMonthArticles(result)
   }
 
+
+  const loadRandom = () => {
+    console.log("!!! loadRandom:");
+    loadFavoriteTopArticles(topic()?.slug)
+    loadReactedTopMonthArticles(topic()?.slug)
+  }
+
   createEffect(
     on(
       () => topic(),
-      () => {
+      () => loadRandom(),
-        loadRandomTopArticles(topic()?.slug)
-        loadRandomTopMonthArticles(topic()?.slug)
-      },
       { defer: true },
     ),
   )
@@ -118,6 +123,7 @@ export const TopicView = (props: Props) => {
   }
 
   onMount(() => {
+    loadRandom()
     if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
       loadMore()
     }