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 getLoadShoutsFilters = (additionalFilters: LoadShoutsFilters = {}): LoadShoutsFilters => {
-    const result = { ...filters }
+    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,70 +221,76 @@ export const Feed = (props: Props) => {
         </div>
 
         <aside class={clsx('col-md-7 col-xl-6 offset-xl-1', styles.feedAside)}>
-          <section class={styles.asideSection}>
+          <Show when={isRightColumnLoaded()}>
-            <h4>{t('Comments')}</h4>
+            <Show when={topComments().length > 0}>
-            <For each={topComments()}>
+              <section class={styles.asideSection}>
-              {(comment) => {
+                <h4>{t('Comments')}</h4>
-                return (
+                <For each={topComments()}>
-                  <div class={styles.comment}>
+                  {(comment) => {
-                    <div class={clsx('text-truncate', styles.commentBody)}>
+                    return (
-                      <a
+                      <div class={styles.comment}>
-                        href={`${getPagePath(router, 'article', {
+                        <div class={clsx('text-truncate', styles.commentBody)}>
-                          slug: comment.shout.slug,
+                          <a
-                        })}?commentId=${comment.id}`}
+                            href={`${getPagePath(router, 'article', {
-                        innerHTML={comment.body}
+                              slug: comment.shout.slug,
-                      />
+                            })}?commentId=${comment.id}`}
-                    </div>
+                            innerHTML={comment.body}
-                    <div class={styles.commentDetails}>
+                          />
-                      <AuthorLink author={comment.createdBy as Author} size={'XS'} />
+                        </div>
-                      <CommentDate comment={comment} isShort={true} isLastInRow={true} />
+                        <div class={styles.commentDetails}>
-                    </div>
+                          <AuthorLink author={comment.createdBy as Author} size={'XS'} />
-                    <div class={clsx('text-truncate', styles.commentArticleTitle)}>
+                          <CommentDate comment={comment} isShort={true} isLastInRow={true} />
-                      <a href={`/${comment.shout.slug}`}>{comment.shout.title}</a>
+                        </div>
-                    </div>
+                        <div class={clsx('text-truncate', styles.commentArticleTitle)}>
-                  </div>
+                          <a href={`/${comment.shout.slug}`}>{comment.shout.title}</a>
-                )
+                        </div>
-              }}
+                      </div>
-            </For>
+                    )
-          </section>
+                  }}
+                </For>
+              </section>
+            </Show>
 
-          <Show when={topTopics().length > 0}>
+            <Show when={topTopics().length > 0}>
-            <section class={styles.asideSection}>
+              <section class={styles.asideSection}>
-              <h4>{t('Hot topics')}</h4>
+                <h4>{t('Hot topics')}</h4>
-              <For each={topTopics().slice(0, 7)}>
+                <For each={topTopics().slice(0, 7)}>
-                {(topic) => (
+                  {(topic) => (
-                  <span class={clsx(stylesTopic.shoutTopic, styles.topic)}>
+                    <span class={clsx(stylesTopic.shoutTopic, styles.topic)}>
-                    <a href={`/topic/${topic.slug}`}>{topic.title}</a>{' '}
+                      <a href={`/topic/${topic.slug}`}>{topic.title}</a>{' '}
-                  </span>
+                    </span>
-                )}
+                  )}
-              </For>
+                </For>
-            </section>
+              </section>
-          </Show>
+            </Show>
 
-          <section class={clsx(styles.asideSection, styles.pinnedLinks)}>
+            <section class={clsx(styles.asideSection, styles.pinnedLinks)}>
-            <h4>{t('Knowledge base')}</h4>
+              <h4>{t('Knowledge base')}</h4>
-            <ul class="nodash">
+              <ul class="nodash">
-              <li>
+                <li>
-                <a href={getPagePath(router, 'guide')}>Как устроен Дискурс</a>
+                  <a href={getPagePath(router, 'guide')}>Как устроен Дискурс</a>
-              </li>
+                </li>
-              <li>
+                <li>
-                <a href="/how-to-write-a-good-article">Как создать хороший текст</a>
+                  <a href="/how-to-write-a-good-article">Как создать хороший текст</a>
-              </li>
+                </li>
-              <li>
+                <li>
-                <a href="#">Правила конструктивных дискуссий</a>
+                  <a href="#">Правила конструктивных дискуссий</a>
-              </li>
+                </li>
-              <li>
+                <li>
-                <a href={getPagePath(router, 'principles')}>Принципы сообщества</a>
+                  <a href={getPagePath(router, 'principles')}>Принципы сообщества</a>
-              </li>
+                </li>
-            </ul>
+              </ul>
-          </section>
-          <Show when={unratedArticles().length > 0}>
-            <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 }} />}
-              </For>
             </section>
+            <Show when={unratedArticles().length > 0}>
+              <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 }} />
+                  )}
+                </For>
+              </section>
+            </Show>
           </Show>
         </aside>
       </div>