nextjs13.4 @folder/loading.js not functioning correctly

Question

I am trying to familiarize myself with NEXTJS 13.4 I have this app directory on a local project App dir Screenshot and I have this code on app/platform/layout.tsx

"use client";
import { CactusLayout, CactusSection } from "medzy/components/layouts/Cactus";
import { useSession } from "next-auth/react";
import { redirect } from "next/navigation";

export default function LayoutPlatform ({main,widgets}: {
    main: React.ReactNode;
    widgets: React.ReactNode;
  }) {
    
    const {status} = useSession()
    return (
       <CactusLayout>
        <CactusSection specify="w-1/12 xl:w-1/4" right border> <div>SIDEBAR</div> </CactusSection>
        {
              (status == "loading")         ? <div>LOADING CLIENT</div>
            : (status == "unauthenticated") ?  redirect("/auth")
            : (
                <>
                <CactusSection specify="flex-1">  {main}  </CactusSection>
                {widgets} 
                </>
            )
        }
        </CactusLayout>
        
    )
}

When I access localhost:3000/platform There is no loading state showing up for the two slots when I tried something simillar without the slots it worked fine I tried fetching mock data with a delay to make sure the use of loading.js but nothing shows until the pages are renders trace : I click on localhost:3000/platform some layout elements shows up : SIDEBAR and LOADING CLIENT and then the loading.js of app/loading.js shows up and then the rendered pages show up

I tried to update nextjs to latest I tried to look for configuration problems but I couldn't find the solution