Suspense Fallback component not showing
Unanswered
aliyorulmazdev posted this in #help-forum
Hello, trying to see if i can show some component while rendering data etc.
Delay works but not rendering fallback component for some reason.
Delay works but not rendering fallback component for some reason.
"use client";
import React, { Suspense } from "react";
import dynamic from "next/dynamic";
import LoadingPage from "@/components/common/LoadingPage";
const PageView = dynamic(
() =>
new Promise((resolve) => {
setTimeout(() => resolve(import("@/components/common/PageView")), 2000);
})
);
const Page = () => {
return (
<div>
<Suspense fallback={<LoadingPage />}>
<PageView />
</Suspense>
</div>
);
};
export default Page;
// components/common/LoadingPage.js
import React from "react";
const LoadingPage = () => {
return (
<div>
<h1>Preparing content...</h1>
</div>
);
};
export default LoadingPage;
// components/PageView.js
import React from "react";
const PageView = () => {
return (
<div>
<h1>Welcome to the Page View</h1>
<p>This is where the main content of the page will be displayed.</p>
</div>
);
};
export default PageView;