Here's the relevant code for the long-loading page & related information:

page.tsx(app router) :

import CodeSnippet from "@/components/CodeSnippet";
import { Suspense } from "react";

const Page = async ({ params }: { params: Promise<{ category: string }> }) => {
  const { category } = await params;

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <CodeSnippet category={category} />
    </Suspense>
  );
};
export default Page;

CodeSnippet.tsx :

import { getCodeBlocks } from "@/lib/notion";
import dynamic from "next/dynamic";
const PrismLoader = dynamic(() => import("@/components/PrismLoader"));

type CodeSnippetProps = { category: string };

const CodeSnippet: React.FC<CodeSnippetProps> = async ({ category }) => {
  const codeBlocksResponse = await getCodeBlocks(category);
  return (
    <div>
      {Object.entries(codeBlocksResponse).map(([key, value]) => {
        return (
          <div key={key}>
            <h2>{key}</h2>

            {value.map(block => {
              return (
                <div key={block.functionality}>
                  <h3>{block.functionality}</h3>
                  <pre className="line-numbers">
                    <code className="language-html language-js">
                      {block.code}
                    </code>
                  </pre>
                </div>
              );
            })}
          </div>
        );
      })}
      <PrismLoader />
    </div>
  );
};
export default CodeSnippet;

PrismLoader.tsx :

"use client";

import Prism from "prismjs";
import "prismjs/themes/prism-okaidia.css";
import "prismjs/plugins/line-numbers/prism-line-numbers.css";

import { useEffect } from "react";
type PrismLoaderProps = {};

const PrismLoader: React.FC<PrismLoaderProps> = () => {
  useEffect(() => {
    Prism.highlightAll();
  }, []);
  return <></>;
};
export default PrismLoader;

getCodeBlocks.ts (Using Notion SDK):

import { Client } from "@notionhq/client";
import {
  ChildPageBlockObjectResponse,
  CodeBlockObjectResponse,
  PageObjectResponse,
  RichTextItemResponse,
} from "@notionhq/client/build/src/api-endpoints";

export const getCodeBlocks = async (category: string) => {
  const notion = new Client({
    auth: process.env.NOTION_API_TOKEN,
  });

  const pageParentResponse = await notion?.databases.query({
    database_id: process.env.NOTION_DATABASE_ID!,
    filter: {
      and: [
        {
          property: "Category",
          select: {
            equals: category,
          },
        },
        {
          property: "Status",
          status: {
            equals: "Done",
          },
        },
      ],
    },
  });
  const pageChildrenResponse: Record<
    string,
    { functionality: string; code: string }[]
  > = {};
  for (const page of pageParentResponse.results as PageObjectResponse[]) {
    // Getting the relevant data for the page
        ...
    }
    pageChildrenResponse[title] = blocks;
  }
  return pageChildrenResponse;
};

I'm having 2 issues with Content Loading time:

1. Inconsistency (2~7 seconds)
2. It's longer than 1 second

What's more weird is that despite the data for this page is fairly small(15.8kb), it's loaded a lot slower than other requests with bigger data:

What I have tried:

1. Disabling PrismLoader in the component
2. Use another device with another network source to visit the site

I've seen other people face the same issue, but it seems no one has given explanation or solution yet.

Any thoughts are welcome. Please help.