nshop-front-m/src/app/(public)/loading.tsx

import {NOT_IMAGE} from "@/utils/constants";
export default function Loading() {
    const arr = [1,2,3,4,5,6];
    return (
        <div className="w-full h-full box-border animate-pulse">
     
            <div className="w-full bg-skeletonbg">
                <img className="block w-full h-130 object-cover" src={NOT_IMAGE} />       
            </div>

            <div className="flex justify-between box-border px-4 py-1.5">
                <span className="w-20 h-5 bg-skeletonbg"></span>
                <span className="w-20 h-5 bg-skeletonbg"></span>
                <span className="w-20 h-5 bg-skeletonbg"></span>
            </div>

            <div className="box-border px-4 mt-1 flex flex-wrap justify-between">
                {arr.map((i) => {
                    return (
                        <div className="w-27 h-36 mt-3 bg-skeletonbg" key={'one'+String(i)}>
                            <img className="block w-full h-full object-cover" src={NOT_IMAGE} />
                        </div>
                    )
                })}
                
            </div>

            
            <div className="box-border px-4 mt-6">
                <div className="h-6 w-40 bg-skeletonbg"></div>
                <div className="flex justify-between flex-wrap">
                    {arr.map((i) => {
                        if(i > 4) return <></>;
                        return (
                            <div className="flex-none w-42.75 mt-4" key={'two'+String(i)}>
                                <img className="block w-42.75 h-57 bg-skeletonbg object-cover" src={NOT_IMAGE} />
                                <p className="h-5 mt-2 bg-skeletonbg"></p>
                                <p className="w-3/5 h-4 mt-2 bg-skeletonbg"></p>
                                <div className="flex justify-between items-center mt-2">
                                    <span className="w-25 h-5 bg-skeletonbg"></span>
                                    <span className="w-8 h-8 bg-skeletonbg"></span>
                                </div>
                            </div>
                        )

                    })}
                    
                </div>
            </div>

        
            

        </div>
    );
}