loading.tsx from /app/dir/dir/loading.tsx is not load, but it loads UI from main /app/loading.tsx

Question

I have app routes to /video/[id]/[title], inside title folder i have main 3 file loading, page and layout tsx. The problem is the loading UI from title folder is not load, it loads loading UI from main app route /app/loading.tsx.

My layout.tsx in /video/[id]/[title] folder:

import React, { Suspense } from "react";

export default function Layout({ children }: { children: React.ReactNode }) {
  return <Suspense>{children}</Suspense>;
}

and my loading.tsx in /video/[id]/[title]:

import React from 'react';
import LoadingUI from '@/components/layout/LoadingUI';

export default function Loading() {
  return (
    <>
      <LoadingUI />
    </>
  );
}

My main layout.tsx in /app/layout.tsx:

import React, { Suspense, ReactNode } from "react";
import { Inter } from "next/font/google";
import Header from "@/components/layout/UI/Header";
import Footer from "@/components/layout/UI/Footer";

interface RootLayoutProps {
  children: ReactNode;
}

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en">
      <body className="bg-ui">
        <Header />
        <Suspense>
          {children}
        </Suspense>
        <Footer />
      </body>
    </html>
  );
}

Am i doing wrong?
nextjs 13.5.4

{children}

loading.tsx from /app/dir/dir/loading.tsx is not load, but it loads UI from main /app/loading.tsx

0 Replies