:topic-page-fix

src/components/Topic/Full.tsx

@@ -26,16 +26,15 @@ export const FullTopic = (props: Props) => {
   const { requireAuthentication } = useSession()
   const [followed, setFollowed] = createSignal()
 
-  const title = createMemo(
+  const title = createMemo(() => {
-    () =>
+    /* FIXME: use title translation*/
-      // FIXME: use title translation
+    return `#${capitalize(
-      `#${capitalize(
+      lang() === 'en'
-        lang() === 'en'
+        ? props.topic.slug.replace(/-/, ' ')
-          ? props.topic.slug.replace(/-/, ' ')
+        : props.topic.title || props.topic.slug.replace(/-/, ' '),
-          : props.topic.title || props.topic.slug.replace(/-/, ' '),
+      true
-        true
+    )}`
-      )}`
+  })
-  )
   createEffect(() => {
     if (follows?.topics?.length !== 0) {
       const items = follows.topics || []

src/components/Views/Author/Author.tsx

@@ -8,7 +8,6 @@ import { useFollowing } from '~/context/following'
 import { useGraphQL } from '~/context/graphql'
 import { useLocalize } from '~/context/localize'
 import { useSession } from '~/context/session'
-import { useUI } from '~/context/ui'
 import { loadReactions } from '~/graphql/api/public'
 import loadShoutsQuery from '~/graphql/query/core/articles-load-by'
 import getAuthorFollowersQuery from '~/graphql/query/core/author-followers'
@@ -31,6 +30,7 @@ type Props = {
   authorSlug: string
   shouts?: Shout[]
   author?: Author
+  topics?: Topic[]
   selectedTab: string
 }
 
@@ -38,6 +38,7 @@ export const PRERENDERED_ARTICLES_COUNT = 12
 const LOAD_MORE_PAGE_SIZE = 9
 
 export const AuthorView = (props: Props) => {
+  console.debug('[components.AuthorView] reactive context init...')
   const { t } = useLocalize()
   const params = useParams()
   const { followers: myFollowers, follows: myFollows } = useFollowing()
@@ -45,7 +46,6 @@ export const AuthorView = (props: Props) => {
   const me = createMemo<Author>(() => session()?.user?.app_data?.profile as Author)
   const [authorSlug, setSlug] = createSignal(props.authorSlug)
   const { sortedFeed } = useFeed()
-  const { modal, hideModal } = useUI()
   const loc = useLocation()
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
   const [isBioExpanded, setIsBioExpanded] = createSignal(false)
@@ -90,10 +90,11 @@ export const AuthorView = (props: Props) => {
       }
     })
   )
-  // 3 // after fetch loading following data
+
+  // 2 // догружает подписки автора
   createEffect(
     on(
-      [followers, () => authorsEntities()[authorSlug()]],
+      [followers, () => props.author || authorsEntities()[authorSlug()]],
       async ([current, found]) => {
         if (current) return
         if (!found) return
@@ -112,7 +113,7 @@ export const AuthorView = (props: Props) => {
     )
   )
 
-  // догружает ленту и комментарии
+  // 3 // догружает ленту и комментарии
   createEffect(
     on(
       () => author() as Author,
@@ -139,11 +140,6 @@ export const AuthorView = (props: Props) => {
     }
   }
 
-  onMount(() => {
-    if (!modal()) hideModal()
-    checkBioHeight()
-  })
-
   const pages = createMemo<Shout[][]>(() =>
     splitToPages(sortedFeed(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE)
   )
@@ -151,6 +147,8 @@ export const AuthorView = (props: Props) => {
     setCommented((prev) => (prev || []).filter((comment) => comment.id !== id))
   }
 
+  onMount(checkBioHeight)
+
   return (
     <div class={styles.authorPage}>
       <div class="wide-container">

src/components/Views/FourOuFour.tsx

@@ -9,6 +9,7 @@ import styles from '../../styles/FourOuFour.module.scss'
 type EvType = Event & { submitter: HTMLElement } & { currentTarget: HTMLFormElement; target: Element }
 
 export const FourOuFourView = () => {
+  console.debug('[components.404] init context...')
   let queryInput: HTMLInputElement | null
   const navigate = useNavigate()
   const search = (_ev: EvType) => navigate(`/search?q=${queryInput?.value || ''}`)

src/components/Views/Topic.tsx

@@ -1,16 +1,13 @@
 import { useSearchParams } from '@solidjs/router'
 import { clsx } from 'clsx'
-import { For, Show, createEffect, createMemo, createSignal, on, onMount } from 'solid-js'
+import { For, Show, Suspense, createEffect, createMemo, createSignal, on, onMount } from 'solid-js'
 import { useAuthors } from '~/context/authors'
 import { useFeed } from '~/context/feed'
-import { useGraphQL } from '~/context/graphql'
 import { useLocalize } from '~/context/localize'
 import { useTopics } from '~/context/topics'
-import getRandomTopShoutsQuery from '~/graphql/query/core/articles-load-random-top'
+import { loadAuthors, loadFollowersByTopic, loadShouts } from '~/graphql/api/public'
-import loadShoutsRandomQuery from '~/graphql/query/core/articles-load-random-topic'
-import loadAuthorsByQuery from '~/graphql/query/core/authors-load-by'
-import getTopicFollowersQuery from '~/graphql/query/core/topic-followers'
 import { Author, AuthorsBy, LoadShoutsOptions, Shout, Topic } from '~/graphql/schema/core.gen'
+import { SHOUTS_PER_PAGE } from '~/routes/(home)'
 import { getUnixtime } from '~/utils/getServerDate'
 import { restoreScrollPosition, saveScrollPosition } from '~/utils/scroll'
 import { splitToPages } from '~/utils/splitToPages'
@@ -20,6 +17,7 @@ import { Row1 } from '../Feed/Row1'
 import { Row2 } from '../Feed/Row2'
 import { Row3 } from '../Feed/Row3'
 import { FullTopic } from '../Topic/Full'
+import { Loading } from '../_shared/Loading'
 import { ArticleCardSwiper } from '../_shared/SolidSwiper/ArticleCardSwiper'
 
 type TopicsPageSearchParams = {
@@ -38,87 +36,96 @@ const LOAD_MORE_PAGE_SIZE = 9 // Row3 + Row3 + Row3
 
 export const TopicView = (props: Props) => {
   const { t } = useLocalize()
-  const { query } = useGraphQL()
+  const { feedByTopic, addFeed } = useFeed()
-  const [searchParams, changeSearchParams] = useSearchParams<TopicsPageSearchParams>()
-  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
-  const { feedByTopic, loadShouts } = useFeed()
-  const sortedFeed = createMemo(() => feedByTopic()[topic()?.slug || ''] || [])
   const { topicEntities } = useTopics()
   const { authorsByTopic } = useAuthors()
+  const [searchParams, changeSearchParams] = useSearchParams<TopicsPageSearchParams>()
+  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
   const [favoriteTopArticles, setFavoriteTopArticles] = createSignal<Shout[]>([])
   const [reactedTopMonthArticles, setReactedTopMonthArticles] = createSignal<Shout[]>([])
   const [topic, setTopic] = createSignal<Topic>()
-  createEffect(
-    on([() => props.topicSlug, topic, topicEntities], async ([slug, t, ttt]) => {
-      if (slug && !t && ttt) {
-        const current = slug in ttt ? ttt[slug] : null
-        console.debug(current)
-        setTopic(current as Topic)
-        await loadTopicFollowers()
-        await loadTopicAuthors()
-        loadRandom()
-      }
-    })
-  )
-
   const [followers, setFollowers] = createSignal<Author[]>(props.followers || [])
+  const sortedFeed = createMemo(() => feedByTopic()[topic()?.slug || ''] || []) // TODO: filter + sort
+
   const loadTopicFollowers = async () => {
-    const resp = await query(getTopicFollowersQuery, { slug: props.topicSlug }).toPromise()
+    const topicFollowersFetcher = loadFollowersByTopic(props.topicSlug)
-    setFollowers(resp?.data?.get_topic_followers || [])
+    const topicFollowers = await topicFollowersFetcher()
+    topicFollowers && setFollowers(topicFollowers)
   }
+
   const [topicAuthors, setTopicAuthors] = createSignal<Author[]>([])
   const loadTopicAuthors = async () => {
     const by: AuthorsBy = { topic: props.topicSlug }
-    const resp = await query(loadAuthorsByQuery, { by, limit: 10, offset: 0 }).toPromise()
+    const topicAuthorsFetcher = await loadAuthors({ by, limit: 10, offset: 0 })
-    setTopicAuthors(resp?.data?.load_authors_by || [])
+    const result = await topicAuthorsFetcher()
+    result && setTopicAuthors(result)
   }
 
-  const loadFavoriteTopArticles = async (topic: string) => {
+  const loadFavoriteTopArticles = async () => {
     const options: LoadShoutsOptions = {
-      filters: { featured: true, topic: topic },
+      filters: { featured: true, topic: props.topicSlug },
       limit: 10,
       random_limit: 100
     }
-    const resp = await query(getRandomTopShoutsQuery, { options }).toPromise()
+    const topicRandomShoutsFetcher = loadShouts(options)
-    setFavoriteTopArticles(resp?.data?.l)
+    const result = await topicRandomShoutsFetcher()
+    result && setFavoriteTopArticles(result)
   }
 
-  const loadReactedTopMonthArticles = async (topic: string) => {
+  const loadReactedTopMonthArticles = async () => {
     const now = new Date()
     const after = getUnixtime(new Date(now.setMonth(now.getMonth() - 1)))
 
     const options: LoadShoutsOptions = {
-      filters: { after: after, featured: true, topic: topic },
+      filters: { after: after, featured: true, topic: props.topicSlug },
       limit: 10,
       random_limit: 10
     }
 
-    const resp = await query(loadShoutsRandomQuery, { options }).toPromise()
+    const reactedTopMonthShoutsFetcher = loadShouts(options)
-    setReactedTopMonthArticles(resp?.data?.load_shouts_random)
+    const result = await reactedTopMonthShoutsFetcher()
+    result && setReactedTopMonthArticles(result)
   }
 
-  const loadRandom = () => {
+  // второй этап начальной загрузки данных
-    if (topic()) {
+  createEffect(
-      loadFavoriteTopArticles((topic() as Topic).slug)
+    on(
-      loadReactedTopMonthArticles((topic() as Topic).slug)
+      topicEntities,
-    }
+      (ttt: Record<string, Topic>) => {
-  }
+        if (props.topicSlug in ttt) {
+          Promise.all([
+            loadFavoriteTopArticles(),
+            loadReactedTopMonthArticles(),
+            loadTopicAuthors(),
+            loadTopicFollowers()
+          ]).finally(() => {
+            setTopic(ttt[props.topicSlug])
+          })
+        }
+      },
+      { defer: true }
+    )
+  )
 
+  // дозагрузка
   const loadMore = async () => {
     saveScrollPosition()
-
+    const amountBefore = feedByTopic()?.[props.topicSlug]?.length || 0
-    const { hasMore } = await loadShouts({
+    const topicShoutsFetcher = loadShouts({
-      filters: { topic: topic()?.slug },
+      filters: { topic: props.topicSlug },
-      limit: LOAD_MORE_PAGE_SIZE,
+      limit: SHOUTS_PER_PAGE,
-      offset: sortedFeed().length // FIXME: use feedByTopic
+      offset: amountBefore
     })
-    setIsLoadMoreButtonVisible(hasMore)
+    const result = await topicShoutsFetcher()
-
+    if (result) {
+      addFeed(result)
+      const amountAfter = feedByTopic()[props.topicSlug].length
+      setIsLoadMoreButtonVisible(amountBefore !== amountAfter)
+    }
     restoreScrollPosition()
   }
 
   onMount(() => {
-    loadRandom()
     if (sortedFeed() || [].length === PRERENDERED_ARTICLES_COUNT) {
       loadMore()
     }
@@ -137,101 +144,105 @@ export const TopicView = (props: Props) => {
   )
   return (
     <div class={styles.topicPage}>
-      <FullTopic topic={topic() as Topic} followers={followers()} authors={topicAuthors()} />
+      <Suspense fallback={<Loading />}>
-      <div class="wide-container">
+        <Show when={topic()}>
-        <div class={clsx(styles.groupControls, 'row group__controls')}>
+          <FullTopic topic={topic() as Topic} followers={followers()} authors={topicAuthors()} />
-          <div class="col-md-16">
+        </Show>
-            <ul class="view-switcher">
+        <div class="wide-container">
-              <li
+          <div class={clsx(styles.groupControls, 'row group__controls')}>
-                classList={{
+            <div class="col-md-16">
-                  'view-switcher__item--selected': searchParams?.by === 'recent' || !searchParams?.by
+              <ul class="view-switcher">
-                }}
+                <li
-              >
+                  classList={{
-                <button
+                    'view-switcher__item--selected': searchParams?.by === 'recent' || !searchParams?.by
-                  type="button"
+                  }}
-                  onClick={() =>
-                    changeSearchParams({
-                      by: 'recent'
-                    })
-                  }
                 >
-                  {t('Recent')}
+                  <button
-                </button>
+                    type="button"
-              </li>
+                    onClick={() =>
-              {/*TODO: server sort*/}
+                      changeSearchParams({
-              {/*<li classList={{ 'view-switcher__item--selected': getSearchParams().by === 'rating' }}>*/}
+                        by: 'recent'
-              {/*  <button type="button" onClick={() => changeSearchParams('by', 'rating')}>*/}
+                      })
-              {/*    {t('Popular')}*/}
+                    }
-              {/*  </button>*/}
+                  >
-              {/*</li>*/}
+                    {t('Recent')}
-              {/*<li classList={{ 'view-switcher__item--selected': getSearchParams().by === 'viewed' }}>*/}
+                  </button>
-              {/*  <button type="button" onClick={() => changeSearchParams('by', 'viewed')}>*/}
+                </li>
-              {/*    {t('Views')}*/}
+                {/*TODO: server sort*/}
-              {/*  </button>*/}
+                {/*<li classList={{ 'view-switcher__item--selected': getSearchParams().by === 'rating' }}>*/}
-              {/*</li>*/}
+                {/*  <button type="button" onClick={() => changeSearchParams('by', 'rating')}>*/}
-              {/*<li classList={{ 'view-switcher__item--selected': getSearchParams().by === 'commented' }}>*/}
+                {/*    {t('Popular')}*/}
-              {/*  <button type="button" onClick={() => changeSearchParams('by', 'commented')}>*/}
+                {/*  </button>*/}
-              {/*    {t('Discussing')}*/}
+                {/*</li>*/}
-              {/*  </button>*/}
+                {/*<li classList={{ 'view-switcher__item--selected': getSearchParams().by === 'viewed' }}>*/}
-              {/*</li>*/}
+                {/*  <button type="button" onClick={() => changeSearchParams('by', 'viewed')}>*/}
-            </ul>
+                {/*    {t('Views')}*/}
-          </div>
+                {/*  </button>*/}
-          <div class="col-md-8">
+                {/*</li>*/}
-            <div class="mode-switcher">
+                {/*<li classList={{ 'view-switcher__item--selected': getSearchParams().by === 'commented' }}>*/}
-              {`${t('Show')} `}
+                {/*  <button type="button" onClick={() => changeSearchParams('by', 'commented')}>*/}
-              <span class="mode-switcher__control">{t('All posts')}</span>
+                {/*    {t('Discussing')}*/}
+                {/*  </button>*/}
+                {/*</li>*/}
+              </ul>
+            </div>
+            <div class="col-md-8">
+              <div class="mode-switcher">
+                {`${t('Show')} `}
+                <span class="mode-switcher__control">{t('All posts')}</span>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <Row1 article={sortedFeed()[0]} />
+        <Row1 article={sortedFeed()[0]} />
-      <Row2 articles={sortedFeed().slice(1, 3)} isEqual={true} />
+        <Row2 articles={sortedFeed().slice(1, 3)} isEqual={true} />
 
-      <Beside
+        <Beside
-        title={t('Topic is supported by')}
+          title={t('Topic is supported by')}
-        values={authorsByTopic()[topic()?.slug || '']?.slice(0, 6)}
+          values={authorsByTopic?.()?.[topic()?.slug || '']?.slice(0, 6)}
-        beside={sortedFeed()[4]}
+          beside={sortedFeed()[4]}
-        wrapper={'author'}
+          wrapper={'author'}
-      />
+        />
-      <Show when={reactedTopMonthArticles()?.length > 0} keyed={true}>
+        <Show when={reactedTopMonthArticles()?.length > 0} keyed={true}>
-        <ArticleCardSwiper title={t('Top month')} slides={reactedTopMonthArticles()} />
+          <ArticleCardSwiper title={t('Top month')} slides={reactedTopMonthArticles()} />
-      </Show>
+        </Show>
-      <Beside
+        <Beside
-        beside={sortedFeed()[12]}
+          beside={sortedFeed()[12]}
-        title={t('Top viewed')}
+          title={t('Top viewed')}
-        values={sortedFeed().slice(0, 5)}
+          values={sortedFeed().slice(0, 5)}
-        wrapper={'top-article'}
+          wrapper={'top-article'}
-      />
+        />
 
-      <Row2 articles={sortedFeed().slice(13, 15)} isEqual={true} />
+        <Row2 articles={sortedFeed().slice(13, 15)} isEqual={true} />
-      <Row1 article={sortedFeed()[15]} />
+        <Row1 article={sortedFeed()[15]} />
 
-      <Show when={favoriteTopArticles()?.length > 0} keyed={true}>
+        <Show when={favoriteTopArticles()?.length > 0} keyed={true}>
-        <ArticleCardSwiper title={t('Favorite')} slides={favoriteTopArticles()} />
+          <ArticleCardSwiper title={t('Favorite')} slides={favoriteTopArticles()} />
-      </Show>
+        </Show>
-      <Show when={sortedFeed().length > 15}>
+        <Show when={sortedFeed().length > 15}>
-        <Row3 articles={sortedFeed().slice(23, 26)} />
+          <Row3 articles={sortedFeed().slice(23, 26)} />
-        <Row2 articles={sortedFeed().slice(26, 28)} />
+          <Row2 articles={sortedFeed().slice(26, 28)} />
-      </Show>
+        </Show>
 
-      <For each={pages()}>
+        <For each={pages()}>
-        {(page) => (
+          {(page) => (
-          <>
+            <>
-            <Row3 articles={page.slice(0, 3)} />
+              <Row3 articles={page.slice(0, 3)} />
-            <Row3 articles={page.slice(3, 6)} />
+              <Row3 articles={page.slice(3, 6)} />
-            <Row3 articles={page.slice(6, 9)} />
+              <Row3 articles={page.slice(6, 9)} />
-          </>
+            </>
-        )}
+          )}
-      </For>
+        </For>
 
-      <Show when={isLoadMoreButtonVisible()}>
+        <Show when={isLoadMoreButtonVisible()}>
-        <p class="load-more-container">
+          <p class="load-more-container">
-          <button class="button" onClick={loadMore}>
+            <button class="button" onClick={loadMore}>
-            {t('Load more')}
+              {t('Load more')}
-          </button>
+            </button>
-        </p>
+          </p>
-      </Show>
+        </Show>
+      </Suspense>
     </div>
   )
 }

src/graphql/api/public.ts

@@ -7,6 +7,7 @@ import getAuthorQuery from '~/graphql/query/core/author-by'
 import loadAuthorsAllQuery from '~/graphql/query/core/authors-all'
 import loadAuthorsByQuery from '~/graphql/query/core/authors-load-by'
 import loadReactionsByQuery from '~/graphql/query/core/reactions-load-by'
+import loadFollowersByTopicQuery from '~/graphql/query/core/topic-followers'
 import loadTopicsQuery from '~/graphql/query/core/topics-all'
 import {
   Author,
@@ -100,3 +101,12 @@ export const loadShoutsSearch = (options: QueryLoad_Shouts_SearchArgs) => {
     if (result) return result as Shout[]
   }, `search-${options.text}-${page}`)
 }
+
+export const loadFollowersByTopic = (slug: string) => {
+  // TODO: paginate topic followers
+  return cache(async () => {
+    const resp = await defaultClient.query(loadFollowersByTopicQuery, { slug }).toPromise()
+    const result = resp?.data?.load_authors_by
+    if (result) return result as Author[]
+  }, `topic-${slug}`)
+}

src/routes/author/[slug]/[tab].tsx

@@ -1,5 +1,5 @@
 import { RouteSectionProps, createAsync, useParams } from '@solidjs/router'
-import { ErrorBoundary, Suspense, createMemo, createReaction } from 'solid-js'
+import { ErrorBoundary, Suspense, createEffect, createMemo } from 'solid-js'
 import { AuthorView } from '~/components/Views/Author'
 import { FourOuFourView } from '~/components/Views/FourOuFour'
 import { Loading } from '~/components/_shared/Loading'
@@ -7,8 +7,14 @@ import { PageLayout } from '~/components/_shared/PageLayout'
 import { useAuthors } from '~/context/authors'
 import { useLocalize } from '~/context/localize'
 import { ReactionsProvider } from '~/context/reactions'
-import { loadShouts } from '~/graphql/api/public'
+import { loadAuthors, loadShouts, loadTopics } from '~/graphql/api/public'
-import { Author, LoadShoutsOptions, Shout } from '~/graphql/schema/core.gen'
+import {
+  Author,
+  LoadShoutsOptions,
+  QueryLoad_Authors_ByArgs,
+  Shout,
+  Topic
+} from '~/graphql/schema/core.gen'
 import { getImageUrl } from '~/lib/getImageUrl'
 import { SHOUTS_PER_PAGE } from '../../(home)'
 
@@ -18,29 +24,49 @@ const fetchAuthorShouts = async (slug: string, offset?: number) => {
   return await shoutsLoader()
 }
 
+const fetchAllTopics = async () => {
+  const topicsFetcher = loadTopics()
+  return await topicsFetcher()
+}
+
+const fetchAuthor = async (slug: string) => {
+  const authorFetcher = loadAuthors({ by: { slug }, limit: 1 } as QueryLoad_Authors_ByArgs)
+  const aaa = await authorFetcher()
+  return aaa?.[0]
+}
+
 export const route = {
   load: async ({ params, location: { query } }: RouteSectionProps<{ articles: Shout[] }>) => {
     const offset: number = Number.parseInt(query.offset, 10)
     const result = await fetchAuthorShouts(params.slug, offset)
-    return result
+    return {
+      author: await fetchAuthor(params.slug),
+      shouts: result || [],
+      topics: await fetchAllTopics()
+    }
   }
 }
 
-export default (props: RouteSectionProps<{ articles: Shout[] }>) => {
+export default (props: RouteSectionProps<{ articles: Shout[]; author: Author; topics: Topic[] }>) => {
   const params = useParams()
+  const { addAuthor } = useAuthors()
   const articles = createAsync(
     async () => props.data.articles || (await fetchAuthorShouts(params.slug)) || []
   )
-  const { authorsEntities } = useAuthors()
+  const author = createAsync(async () => {
+    const a = props.data.author || (await fetchAuthor(params.slug))
+    addAuthor(a)
+    return a
+  })
+  const topics = createAsync(async () => props.data.topics || (await fetchAllTopics()))
   const { t } = useLocalize()
-  const author = createMemo(() => authorsEntities?.()[params.slug])
   const title = createMemo(() => `${author()?.name || ''}`)
 
   // docs: `a side effect that is run the first time the expression
   // wrapped by the returned tracking function is notified of a change`
-  createReaction(() => {
+  createEffect(() => {
     if (author()) {
-      console.debug('[routes.slug] article signal changed once')
+      console.debug('[routes] author/[slug] author loaded fx')
       window?.gtag?.('event', 'page_view', {
         page_title: author()?.name || '',
         page_location: window?.location.href || '',
@@ -69,7 +95,8 @@ export default (props: RouteSectionProps<{ articles: Shout[] }>) => {
               author={author() as Author}
               authorSlug={params.slug}
               shouts={articles() as Shout[]}
-              selectedTab={params.tab || ''}
+              selectedTab={params.tab || 'shouts'}
+              topics={topics()}
             />
           </ReactionsProvider>
         </PageLayout>

src/routes/topic/[slug].tsx

@@ -1,12 +1,13 @@
 import { RouteSectionProps, createAsync, useParams } from '@solidjs/router'
-import { ErrorBoundary, Suspense, createEffect, createMemo } from 'solid-js'
+import { HttpStatusCode } from '@solidjs/start'
+import { Show, Suspense, createEffect, createMemo, createSignal } from 'solid-js'
 import { FourOuFourView } from '~/components/Views/FourOuFour'
 import { TopicView } from '~/components/Views/Topic'
 import { Loading } from '~/components/_shared/Loading'
 import { PageLayout } from '~/components/_shared/PageLayout'
 import { useLocalize } from '~/context/localize'
 import { useTopics } from '~/context/topics'
-import { loadShouts } from '~/graphql/api/public'
+import { loadShouts, loadTopics } from '~/graphql/api/public'
 import { LoadShoutsOptions, Shout, Topic } from '~/graphql/schema/core.gen'
 import { getImageUrl } from '~/lib/getImageUrl'
 import { getArticleDescription } from '~/utils/meta'
@@ -18,23 +19,47 @@ const fetchTopicShouts = async (slug: string, offset?: number) => {
   return await shoutsLoader()
 }
 
+const fetchAllTopics = async () => {
+  const topicsFetcher = loadTopics()
+  return await topicsFetcher()
+}
+
 export const route = {
   load: async ({ params, location: { query } }: RouteSectionProps<{ articles: Shout[] }>) => {
     const offset: number = Number.parseInt(query.offset, 10)
     const result = await fetchTopicShouts(params.slug, offset)
-    return result
+    return {
+      articles: result,
+      topics: await fetchAllTopics()
+    }
   }
 }
 
-export default (props: RouteSectionProps<{ articles: Shout[] }>) => {
+export default (props: RouteSectionProps<{ articles: Shout[]; topics: Topic[] }>) => {
+  const { t } = useLocalize()
   const params = useParams()
+  const { addTopics } = useTopics()
+  const [loadingError, setLoadingError] = createSignal(false)
+
+  const topic = createAsync(async () => {
+    try {
+      const ttt: Topic[] = props.data.topics || (await fetchAllTopics()) || []
+      addTopics(ttt)
+      console.debug('[route.topic] all topics loaded')
+      const t = ttt.find((x) => x.slug === params.slug)
+      return t
+    } catch (_error) {
+      setLoadingError(true)
+      return null
+    }
+  })
+
   const articles = createAsync(
     async () => props.data.articles || (await fetchTopicShouts(params.slug)) || []
   )
-  const { topicEntities } = useTopics()
+
-  const { t } = useLocalize()
-  const topic = createMemo(() => topicEntities?.()[params.slug])
   const title = createMemo(() => `${t('Discours')} :: ${topic()?.title || ''}`)
+
   createEffect(() => {
     if (topic() && window) {
       window?.gtag?.('event', 'page_view', {
@@ -44,19 +69,30 @@ export default (props: RouteSectionProps<{ articles: Shout[] }>) => {
       })
     }
   })
+
   const desc = createMemo(() =>
     topic()?.body
       ? getArticleDescription(topic()?.body || '')
       : t('The most interesting publications on the topic', { topicName: title() })
   )
+
   const cover = createMemo(() =>
     topic()?.pic
       ? getImageUrl(topic()?.pic || '', { width: 1200 })
       : getImageUrl('production/image/logo_image.png')
   )
+
   return (
-    <ErrorBoundary fallback={(_err) => <FourOuFourView />}>
+    <Suspense fallback={<Loading />}>
-      <Suspense fallback={<Loading />}>
+      <Show
+        when={!loadingError()}
+        fallback={
+          <PageLayout isHeaderFixed={false} hideFooter={true} title={t('Nothing is here')}>
+            <FourOuFourView />
+            <HttpStatusCode code={404} />
+          </PageLayout>
+        }
+      >
         <PageLayout
           key="topic"
           title={title()}
@@ -71,7 +107,7 @@ export default (props: RouteSectionProps<{ articles: Shout[] }>) => {
             shouts={articles() as Shout[]}
           />
         </PageLayout>
-      </Suspense>
+      </Show>
-    </ErrorBoundary>
+    </Suspense>
   )
 }