Suspense loading UI keep using from /app/loading.tsx

Question

14.0.01 - Why after build/and dev my suspense loading UI is still using loading component from my main /app/loading.tsx?

I have route /foldername/loading.tsx and when i access route /foldername using <Link> it doesnt load the loader component from /foldername/loading.tsx but it loads the /app/loading.tsx

I use Suspense in layout only, not using fallback for each component

/foldername/layout.tsx:

import React, { Suspense } from 'react';

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

/app/loading.tsx:

import React, { ReactNode } from 'react';
import Header from '@/components/layout/UI/Header';
import Footer from '@/components/layout/UI/Footer';
import '@/globals.css';

interface RootLayoutProps {
  children: ReactNode;
}

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

/app/loading.tsx:

import React from 'react';
import Loader from '@/components/layout/UI/Loader';

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

/foldername/loading.tsx:

import React from 'react';
import OtherLoader from '@/components/layout/UI/OtherLoader';

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

{children}

Suspense loading UI keep using from /app/loading.tsx

0 Replies