Next.js Discord

Discord Forum

Suspense Fallback component not showing

Unanswered
aliyorulmazdev posted this in #help-forum
Open in Discord
Hello, trying to see if i can show some component while rendering data etc.
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; 

0 Replies