fix: make parallel routes not render blocking

fix: add loading to parallel routes
This commit is contained in:
Joakim Jäderberg
2024-11-18 08:44:49 +01:00
parent 7714a48fb4
commit 9c7ac78e14
31 changed files with 50 additions and 38 deletions

View File

@@ -0,0 +1,5 @@
import BreadcrumbsSkeleton from "@/components/Breadcrumbs/BreadcrumbsSkeleton"
export default function Loading() {
return <BreadcrumbsSkeleton />
}

View File

@@ -1,7 +1,4 @@
import { Suspense } from "react"
import Breadcrumbs from "@/components/Breadcrumbs"
import BreadcrumbsSkeleton from "@/components/Breadcrumbs/BreadcrumbsSkeleton"
import { setLang } from "@/i18n/serverContext"
import { LangParams, PageArgs } from "@/types/params"
@@ -9,9 +6,5 @@ import { LangParams, PageArgs } from "@/types/params"
export default function AllBreadcrumbs({ params }: PageArgs<LangParams>) {
setLang(params.lang)
return (
<Suspense fallback={<BreadcrumbsSkeleton />}>
<Breadcrumbs />
</Suspense>
)
return <Breadcrumbs />
}

View File

@@ -0,0 +1,5 @@
import BreadcrumbsSkeleton from "@/components/Breadcrumbs/BreadcrumbsSkeleton"
export default function Loading() {
return <BreadcrumbsSkeleton />
}

View File

@@ -0,0 +1,11 @@
import { env } from "@/env/server"
import CurrentLoadingSpinner from "@/components/Current/LoadingSpinner"
import LoadingSpinner from "@/components/LoadingSpinner"
export default function LoadingFooter() {
if (env.HIDE_FOR_NEXT_RELEASE) {
return <CurrentLoadingSpinner />
}
return <LoadingSpinner />
}

View File

@@ -0,0 +1 @@
export { default } from "../loading"

View File

@@ -1 +0,0 @@
export { default } from "../../page"

View File

@@ -1 +1,14 @@
export { default } from "./page"
import { Suspense } from "react"
import Loading from "./loading"
import Page from "./page"
import { PageArgs } from "@/types/params"
export default function Default(props: PageArgs<{}, URLSearchParams>) {
return (
<Suspense fallback={<Loading />}>
<Page {...props} />
</Suspense>
)
}

View File

@@ -1 +0,0 @@
export { default } from "../../page"

View File

@@ -1 +0,0 @@
export { default } from "../../page"

View File

@@ -0,0 +1 @@
export { default } from "../loading"

View File

@@ -1 +0,0 @@
export { default } from "../../page"

View File

@@ -1 +0,0 @@
export { default } from "./page"

View File

@@ -1 +0,0 @@
export { default } from "../../page"

View File

@@ -0,0 +1 @@
export { default } from "../loading"

View File

@@ -1 +0,0 @@
export { default } from "../page"

View File

@@ -1 +0,0 @@
export { default } from "../../page"

View File

@@ -1 +0,0 @@
export { default } from "./page"

View File

@@ -0,0 +1,5 @@
import HeaderFallback from "@/components/Current/Header/HeaderFallback"
export default function LoadingFooter() {
return <HeaderFallback />
}

View File

@@ -1 +0,0 @@
export { default } from "../../page"

View File

@@ -1,9 +1,6 @@
import { Suspense } from "react"
import { env } from "@/env/server"
import CurrentHeader from "@/components/Current/Header"
import HeaderFallback from "@/components/Current/Header/HeaderFallback"
import Header from "@/components/Header"
import { setLang } from "@/i18n/serverContext"
@@ -13,11 +10,7 @@ export default function HeaderPage({ params }: PageArgs<LangParams>) {
setLang(params.lang)
if (env.HIDE_FOR_NEXT_RELEASE) {
return (
<Suspense fallback={<HeaderFallback />}>
<CurrentHeader />
</Suspense>
)
return <CurrentHeader />
}
return <Header />

View File

@@ -0,0 +1 @@
export { default } from "../loading"

View File

@@ -1 +0,0 @@
export { default } from "../page"

View File

@@ -1 +0,0 @@
export { default } from "../../page"

View File

@@ -1 +0,0 @@
export { default } from "./page"

View File

@@ -0,0 +1,3 @@
export default function Loading() {
return null
}

View File

@@ -1 +0,0 @@
export { default } from "../../page"

View File

@@ -1,5 +1,3 @@
import { Suspense } from "react"
import { env } from "@/env/server"
import SitewideAlert, { preload } from "@/components/SitewideAlert"
@@ -15,9 +13,5 @@ export default function SitewideAlertPage({ params }: PageArgs<LangParams>) {
setLang(params.lang)
preload()
return (
<Suspense>
<SitewideAlert />
</Suspense>
)
return <SitewideAlert />
}