export default function Loading() {

  return (

    <>

      {}

      <section className="border-y border-line">

        <div className="mx-auto w-full max-w-register px-4 py-8 sm:px-6 sm:py-14">

          <div className="mb-3 h-3 w-20 animate-pulse rounded-sm bg-graphite" />

          <div className="h-8 w-64 animate-pulse rounded-sm bg-graphite sm:h-10 sm:w-96" />

          <div className="mt-4 h-4 w-48 animate-pulse rounded-sm bg-graphite" />

          <div className="mt-8 space-y-px overflow-hidden rounded-sm border border-line">

            {Array.from({ length: 12 }).map((_, i) => (

              <div

                key={i}

                className="flex h-10 items-center gap-3 border-t border-line px-4 first:border-t-0"

              >

                <div className="h-2.5 w-16 animate-pulse rounded-sm bg-graphite" />

                <div className="h-2.5 w-20 animate-pulse rounded-sm bg-graphite" />

                <div className="h-2.5 flex-1 animate-pulse rounded-sm bg-graphite" />

                <div className="h-2.5 w-14 animate-pulse rounded-sm bg-graphite" />

              </div>

            ))}

          </div>

        </div>

      </section>

      {}

      <div className="mx-auto w-full max-w-register px-4 py-12 sm:px-6">

        <div className="mb-2 h-3 w-24 animate-pulse rounded-sm bg-graphite" />

        <div className="mt-1 h-6 w-56 animate-pulse rounded-sm bg-graphite" />

        <div className="mt-8 space-y-2">

          {Array.from({ length: 8 }).map((_, i) => (

            <div key={i} className="h-12 w-full animate-pulse rounded-sm bg-graphite" />

          ))}

        </div>

      </div>

    </>

  );

}