Blazity · Max-Mogilski · Nov 14, 2023 · Nov 14, 2023
diff --git a/src/app/[lang]/category/[slug]/loading.tsx b/src/app/[lang]/category/[slug]/loading.tsx
@@ -0,0 +1,9 @@
+import { Skeleton } from "@/components/ui/Skeleton/Skeleton"
+
+export default function Loading() {
+ return (
+ <div className="w-full">
+ <Skeleton className="min-h-[150px] w-full" />
+ </div>
+ )
+}
diff --git a/src/app/[lang]/category/[slug]/page.tsx b/src/app/[lang]/category/[slug]/page.tsx
@@ -1,9 +1,11 @@
 import { Metadata } from "next/types"
 import { unstable_setRequestLocale } from "next-intl/server"
+import { Suspense } from "react"
 import { CategoryArticles } from "@/components/CategoryArticles/CategoryArticles"
 import { Locale } from "@/i18n/i18n"
 import { setTranslations } from "@/i18n/setTranslations"
 import { getMatadataObj } from "@/utils/getMetadataObj"
+import Loading from "./loading"
 
 type ArticlePageProps = { params: { slug: string; lang: Locale } }
 
@@ -15,5 +17,9 @@ export default async function Web({ params: { slug, lang } }: ArticlePageProps)
  unstable_setRequestLocale(lang)
  await setTranslations(lang)
 
- return <CategoryArticles category={slug} />
+ return (
+ <Suspense fallback={<Loading />}>
+ <CategoryArticles category={slug} />
+ </Suspense>
+ )
 }
diff --git a/src/app/[lang]/layout.tsx b/src/app/[lang]/layout.tsx
@@ -1,12 +1,12 @@
+import { notFound } from "next/navigation"
+import { unstable_setRequestLocale } from "next-intl/server"
 import { Footer } from "@/components/Footer/Footer"
 import { Navigation } from "@/components/Navigation/Navigation"
 import { env } from "@/env.mjs"
 import { i18n, type Locale } from "@/i18n/i18n"
 import { setTranslations } from "@/i18n/setTranslations"
 import { getNavigation } from "@/lib/client"
 import "@/styles/tailwind.css"
-import { unstable_setRequestLocale } from "next-intl/server"
-import { notFound } from "next/navigation"
 import { GoogleAnalytics } from "../GoogleAnalytics"
 import Providers from "../Providers"
 
@@ -41,7 +41,7 @@ export default async function Layout({ children, params }: { children: React.Rea
  if (!isValidLocale) notFound()
  unstable_setRequestLocale(locale)
  const translations = await setTranslations(locale)
- const { navigation, footer, logo } = await getNavigation(locale)
+ const { navigation, footer } = await getNavigation(locale)
 
  return (
  <html lang={locale}>
@@ -55,7 +55,7 @@ export default async function Layout({ children, params }: { children: React.Rea
  </div>
 
  <main className="mx-auto flex w-full max-w-[1200px] flex-1 flex-col px-4 pb-16">{children}</main>
- <Footer logoUrl={logo?.url} footer={footer} />
+ <Footer footer={footer} />
  </body>
  </Providers>
  </html>

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -10,10 +10,9 @@ import { GetNavigationReturn } from "../Navigation/Navigation"
 
 type FooterProps = {
  footer: Pick<GetNavigationReturn, "footer">["footer"]
- logoUrl: string | undefined
 }
 
-export async function Footer({ footer, logoUrl }: FooterProps) {
+export async function Footer({ footer }: FooterProps) {
  const locale = useLocale()
 
  if (!footer?.contactSection) return null
@@ -68,14 +67,21 @@ export async function Footer({ footer, logoUrl }: FooterProps) {
  <div className="w-fit lg:w-auto">
  <DynamicLangSelect />
  </div>
- {logoUrl && (
+ {footer?.additionalLogo && (
  <Link
  hrefLang={locale}
  target="_blank"
  href={"https://blazity.com/"}
  className="flex max-h-[100px] w-[100px] lg:justify-end"
  >
- <Image src={logoUrl} width={300} height={300} alt="Blazity logo" className="w-full" quality={100} />
+ <Image
+ src={footer?.additionalLogo.url}
+ width={300}
+ height={300}
+ alt="Blazity logo"
+ className="w-full"
+ quality={100}
+ />
  </Link>
  )}
  <p className="text-sm">

diff --git a/src/lib/client.ts b/src/lib/client.ts
@@ -1,9 +1,9 @@
-import { env } from "@/env.mjs"
-import { Locale, standardNotationToHygraphLocale } from "@/i18n/i18n"
 import { TypedDocumentNode } from "@graphql-typed-document-node/core"
 import { print } from "graphql"
 import omit from "lodash/omit"
 import pThrottle from "p-throttle"
+import { env } from "@/env.mjs"
+import { Locale, standardNotationToHygraphLocale } from "@/i18n/i18n"
 import {
  getArticleBySlugQuery,
  getArticleMetadataBySlugQuery,
@@ -18,8 +18,8 @@ import {
 import { getHomepageMetadataQuery, getHomepageQuery, getNavigationQuery } from "./queries/components"
 import { getPageBySlugQuery, getPageMetadataBySlugQuery, listPagesForSitemapQuery } from "./queries/pages"
 import { getQuizQuestionsByIdQuery } from "./queries/quizes"
-import { Tag } from "./tags"
 import { getGlobalTranslationsQuery } from "./queries/translations"
+import { Tag } from "./tags"
 
 const throttle = pThrottle({
  limit: 5, //Community: 5req/sec
@@ -97,14 +97,14 @@ export async function getHomepageMetadata(locale: Locale) {
 }
 
 export async function getNavigation(locale: Locale) {
- const { navigations, footers, asset } = await graphqlFetch({
+ const { navigations, footers } = await graphqlFetch({
  cache: "force-cache",
  document: getNavigationQuery,
  tags: ["NAVIGATION", "PAGE", "CATEGORY"],
  variables: { locale },
  })
 
- return { navigation: navigations[0] ?? null, footer: footers[0] ?? null, logo: asset ?? null }
+ return { navigation: navigations[0] ?? null, footer: footers[0] ?? null }
 }
 
 export async function getArticlesQuantity(locale: Locale) {

diff --git a/src/lib/queries/components.ts b/src/lib/queries/components.ts
@@ -21,13 +21,13 @@ export const getNavigationQuery = graphql(`
  url
  }
  }
- asset(where: { id: "clo74v3lz1yqp0bw1w7jsrrin" }) {
- url
- }
  footers(locales: $locales, first: 1) {
  logo {
  url
  }
+ additionalLogo {
+ url
+ }
  ownershipAndCredits
  companyName
  youtubeLink