nshop-front-m/src/app/(public)/search/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 px-4 animate-pulse">
     
            <div className="w-full h-10 mt-3 bg-skeletonbg"></div>

                <div className="w-full mx-auto px-4 py-6">
                <div className="text-base font-medium mb-4 w-25 h-4"></div>
                <div className="flex flex-wrap items-center justify-start gap-3">
                
                    <div className="bg-skeletonbg rounded-sm w-30 h-8"></div>
                    <div className="bg-skeletonbg rounded-sm w-20 h-8"></div>
                    <div className="bg-skeletonbg rounded-sm w-25 h-8"></div>
                    <div className="bg-skeletonbg rounded-sm w-18 h-8"></div>
                    <div className="bg-skeletonbg rounded-sm w-32 h-8"></div>
                    <div className="bg-skeletonbg rounded-sm w-20 h-8"></div>
                    <div className="bg-skeletonbg rounded-sm w-20 h-8"></div>
                </div>
            </div>

            <div className="flex justify-between items-center mt-6">
                <div className="w-15 h-4 bg-skeletonbg"></div>
                <div className="w-18 h-7 bg-skeletonbg"></div>
            </div>

            <div className="flex flex-wrap justify-between items-center">
                {arr.map((i) => {
                    return (
                        <div className="flex-none w-42.5 mt-4" key={i}>
                            <img className="block w-42.5 h-57 object-contain bg-skeletonbg" src={NOT_IMAGE} />
                            <p className="mt-2 h-5 bg-skeletonbg"></p>
                            <p className="w-26 h-5 bg-skeletonbg mt-2"></p>
                            <p className="mt-2 flex items-center justify-between">
                                <span className="w-20 h-5 bg-skeletonbg"></span>
                                <span className="h-8 w-8 bg-skeletonbg"></span>
                            </p>
                        </div>
                    );

                })}
                
            </div>

        </div>
    );
}