<Suspense />
Unanswered
Sloth bear posted this in #help-forum
Sloth bearOP
Hello !
My <Suspense /> is not working. I put a delay in my childrens for testing
import React, { Suspense, lazy } from 'react';
import ReactLoading from 'react-loading';
import { Typo } from '@/ui/design-sytem/typo';
import { Data } from '@/config/mustawas';
const VideoBar = lazy(() => import('../Navigation/video-bar'));
export interface SelectedVideoProps {
selected_chapter: keyof Data;
selected_course: string;
selected_video?: string;
className?: string;
}
export const SelectedVideo = ({
selected_chapter,
selected_course,
selected_video = 'video1',
}: SelectedVideoProps) => {
return (
<div className="pt-20 pl-20">
<Typo
fontFamily="sfPro"
fontSize={36}
fontWeight="Bold"
letterSpacing={0.5}
>
Courses
</Typo>
<div className="pt-12 space-x-10 flex">
<Suspense fallback={<ReactLoading type="spin" color="black" />}>
<video
src="dcdcdcdcdc"
width="700"
height="397"
controls
autoPlay
playsInline
/>
</Suspense>
<Suspense fallback={<ReactLoading type="spin" color="black" />}>
<VideoBar
selected_chapter={selected_chapter}
selected_course={selected_course}
percentage_videos={42}
/>
</Suspense>
</div>
</div>
);
};
My <Suspense /> is not working. I put a delay in my childrens for testing
import React, { Suspense, lazy } from 'react';
import ReactLoading from 'react-loading';
import { Typo } from '@/ui/design-sytem/typo';
import { Data } from '@/config/mustawas';
const VideoBar = lazy(() => import('../Navigation/video-bar'));
export interface SelectedVideoProps {
selected_chapter: keyof Data;
selected_course: string;
selected_video?: string;
className?: string;
}
export const SelectedVideo = ({
selected_chapter,
selected_course,
selected_video = 'video1',
}: SelectedVideoProps) => {
return (
<div className="pt-20 pl-20">
<Typo
fontFamily="sfPro"
fontSize={36}
fontWeight="Bold"
letterSpacing={0.5}
>
Courses
</Typo>
<div className="pt-12 space-x-10 flex">
<Suspense fallback={<ReactLoading type="spin" color="black" />}>
<video
src="dcdcdcdcdc"
width="700"
height="397"
controls
autoPlay
playsInline
/>
</Suspense>
<Suspense fallback={<ReactLoading type="spin" color="black" />}>
<VideoBar
selected_chapter={selected_chapter}
selected_course={selected_course}
percentage_videos={42}
/>
</Suspense>
</div>
</div>
);
};