As you can see in the video, before the loading component loads, other components start loading and then the loading component is activate. Is this normal or is there a problem?

there is no problem on dev. just on prod.

using shadcnui/skeleton & next v14.1.4

@/app/blog/loading.tsx

import { Skeleton } from "@/components/ui/skeleton";

export default function Loading() {
  const arr = [{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},{id:7},{id:8},{id:9}]
  
  return (
    <>
        <div className="flex justify-around items-center rounded-2xl">
          <div className="grid w-full gap-5 max-w-[1180px] grid-cols-[repeat(6,minmax(180px,1fr))]
          ">
            {arr.map(item => (
              <Skeleton key={item.id} className="rounded-2xl col-span-2 h-[380px]" />
            ))}
          </div>
        </div>
    </>
  )
}