crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-20 00:16:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Test out suspense in react

Browse Source
This commit is contained in:
Henrik Larsson 2023-08-08 21:51:41 +02:00
parent 4b1a5bed29
commit 103c7809c3
1 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
components/layout/dynamic-content-manager/dynamic-content-manager.tsx
View File

@ -1,22 +1,25 @@
'use client'; 'use client';
import BlurbSection from '@/components/modules/blurb-section/blurb-section';
import FilteredProductList from '@/components/modules/filtered-product-list/filtered-product-list';
import Hero from '@/components/modules/hero';
import ReusableSection from '@/components/modules/reusable-section/reusable-section';
import Slider from '@/components/modules/slider/slider';
import USPSection from '@/components/modules/usp-section/usp-section';
import { InfoCircledIcon } from '@radix-ui/react-icons'; import { InfoCircledIcon } from '@radix-ui/react-icons';
import dynamic from 'next/dynamic'; import { Suspense } from 'react';
import Hero from 'components/modules/hero';
import ReusableSection from 'components/modules/reusable-section/reusable-section';
const USPSection = dynamic(() => import('components/modules/usp-section'));
const Slider = dynamic(() => import('components/modules/slider'));
const BlurbSection = dynamic(() => import('components/modules/blurb-section'));
const FilteredProductList = dynamic(() => import('components/modules/filtered-product-list'));
interface getContentComponentProps { interface getContentComponentProps {
_type: string; _type: string;
_key: number; _key: number;
disabled: boolean; disabled: boolean;
} }
const getContentComponent = ({ _type, _key, disabled, ...rest }: getContentComponentProps) => { const getContentComponent = (
{ _type, _key, disabled, ...rest }: getContentComponentProps,
index: number
) => {
let Component: any; let Component: any;
switch (_type) { switch (_type) {
case 'hero': case 'hero':
Component = Hero; Component = Hero;
@ -65,7 +68,16 @@ const getContentComponent = ({ _type, _key, disabled, ...rest }: getContentCompo
} }
return Component ? ( return Component ? (
<Component key={`index-${_key}`} {...rest} /> index == 0 ? (
<Component key={`index-${_key}`} {...rest} />
) : (
<Suspense
key={`index-${_key}`}
fallback={<h2 className="font-bold text-high-contrast">Loading...</h2>}
>
<Component {...rest} />
</Suspense>
)
) : ( ) : (
<div key={`index-${_key}`}>Something else</div> <div key={`index-${_key}`}>Something else</div>
); );