expo top fix, feed right column loading state (#339)

Co-authored-by: Igor Lobanov <igor.lobanov@onetwotrip.com>

src/components/Views/Expo/Expo.tsx

@@ -45,8 +45,8 @@ export const Expo = (props: Props) => {
     shouts: isLoaded() ? props.shouts : [],
   })
 
-  const getLoadShoutsFilters = (filters: LoadShoutsFilters = {}): LoadShoutsFilters => {
-    const result = { ...filters }
+  const getLoadShoutsFilters = (additionalFilters: LoadShoutsFilters = {}): LoadShoutsFilters => {
+    const filters = { ...additionalFilters }
 
     if (props.layout) {
       filters.layout = props.layout
@@ -54,7 +54,7 @@ export const Expo = (props: Props) => {
       filters.excludeLayout = 'article'
     }
 
-    return result
+    return filters
   }
 
   const loadMore = async (count: number) => {

src/components/Views/Feed/Feed.tsx

@@ -55,8 +55,8 @@ export const Feed = (props: Props) => {
   const { t } = useLocalize()
   const { page, searchParams } = useRouter<FeedSearchParams>()
   const [isLoading, setIsLoading] = createSignal(false)
+  const [isRightColumnLoaded, setIsRightColumnLoaded] = createSignal(false)
 
-  // state
   const { sortedArticles } = useArticlesStore()
   const { topTopics } = useTopicsStore()
   const { topAuthors } = useTopAuthorsStore()
@@ -73,9 +73,15 @@ export const Feed = (props: Props) => {
     setUnratedArticles(result)
   }
 
+  const loadTopComments = async () => {
+    const comments = await loadReactionsBy({ by: { comment: true }, limit: 5 })
+    setTopComments(comments)
+  }
+
   onMount(() => {
     loadMore()
-    loadUnratedArticles()
+    // eslint-disable-next-line promise/catch-or-return
+    Promise.all([loadUnratedArticles(), loadTopComments()]).finally(() => setIsRightColumnLoaded(true))
   })
 
   createEffect(
@@ -118,12 +124,6 @@ export const Feed = (props: Props) => {
     setIsLoadMoreButtonVisible(hasMore)
   }
 
-  onMount(async () => {
-    // load 5 recent comments overall
-    const comments = await loadReactionsBy({ by: { comment: true }, limit: 5 })
-    setTopComments(comments)
-  })
-
   const ogImage = getImageUrl('production/image/logo_image.png')
   const description = t(
     'Independent media project about culture, science, art and society with horizontal editing',
@@ -221,6 +221,8 @@ export const Feed = (props: Props) => {
         </div>
 
         <aside class={clsx('col-md-7 col-xl-6 offset-xl-1', styles.feedAside)}>
+          <Show when={isRightColumnLoaded()}>
+            <Show when={topComments().length > 0}>
               <section class={styles.asideSection}>
                 <h4>{t('Comments')}</h4>
                 <For each={topComments()}>
@@ -247,6 +249,7 @@ export const Feed = (props: Props) => {
                   }}
                 </For>
               </section>
+            </Show>
 
             <Show when={topTopics().length > 0}>
               <section class={styles.asideSection}>
@@ -282,10 +285,13 @@ export const Feed = (props: Props) => {
               <section class={clsx(styles.asideSection)}>
                 <h4>{t('Be the first to rate')}</h4>
                 <For each={unratedArticles()}>
-                {(article) => <ArticleCard article={article} settings={{ noimage: true, nodate: true }} />}
+                  {(article) => (
+                    <ArticleCard article={article} settings={{ noimage: true, nodate: true }} />
+                  )}
                 </For>
               </section>
             </Show>
+          </Show>
         </aside>
       </div>
     </div>