I have a user page, the structure looks like this: folder [id]:

1. layout.tsx

import UserLayout from '@/components/screens/user/layout/UserLayout'

interface ILayout {
    children: React.ReactNode
}

export default async function Layout({ children }: ILayout) {

        // this is where the request comes in

    return <UserLayout>{children}</UserLayout>
}

2. (main)/page.tsx

export default async function Page({ params: { id } }: IPage) {
    
        // this is where the request comes in

    return <User />
}

3. (main)/loading.tsx

import UserLoader from '@/components/screens/user/loader/UserLoader'

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

4. courses/page.tsx

export default async function Page({ params: { id } }: IPage) {
    
        // this is where the request comes in

    return <UserCourses />
}

5. courses/loading.tsx

import UserCoursesLoader from '@/components/screens/user-courses/loader/UserCoursesLoader'

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

the layout itself sends a request to obtain information about the user, this request is also made in (main)/page.tsx, and in courses/page.tsx there is already a request to obtain user courses, I use skeleton in loading.tsx and for Each page in [id] has its own, but I also need Skeleton for the layout because it also sends a request. how to implement this