【Next.js】ローディング画面の作り方を loading.tsx から初回だけのオープニングまで解説

export default function Loading() {
  return (
    <div role="status" className="mx-auto max-w-5xl px-6 py-16">
      <span className="sr-only">商品を読み込んでいます</span>
      <div className="h-8 w-48 animate-pulse rounded-md bg-zinc-200 motion-reduce:animate-none" />
      <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {Array.from({ length: 6 }).map((_, i) => (
          <div key={i} className="space-y-3">
            <div className="aspect-[4/3] animate-pulse rounded-xl bg-zinc-200 motion-reduce:animate-none" />
            <div className="h-4 w-3/4 animate-pulse rounded bg-zinc-200 motion-reduce:animate-none" />
            <div className="h-4 w-1/2 animate-pulse rounded bg-zinc-200 motion-reduce:animate-none" />
          </div>
        ))}
      </div>
    </div>
  );
}

"use client";

import { useFormStatus } from "react-dom";

export function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button
      type="submit"
      disabled={pending}
      className="inline-flex min-h-11 items-center gap-2 rounded-lg bg-zinc-900 px-5 text-sm font-medium text-white disabled:opacity-70"
    >
      {pending && (
        <span
          aria-hidden="true"
          className="size-4 animate-spin rounded-full border-2 border-white/40 border-t-white motion-reduce:animate-none"
        />
      )}
      {pending ? "送信中…" : "送信する"}
    </button>
  );
}

"use client";

import { useEffect, useState } from "react";
import { AnimatePresence, motion } from "motion/react";

const STORAGE_KEY = "splash-seen";
const MAX_MS = 1500;

function markSeen() {
  try {
    sessionStorage.setItem(STORAGE_KEY, "1");
  } catch {}
}

export function Splash() {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    let seen = false;
    try {
      seen = sessionStorage.getItem(STORAGE_KEY) === "1";
    } catch {}
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (seen || reduce) {
      setVisible(false);
      return;
    }
    const timer = window.setTimeout(() => {
      markSeen();
      setVisible(false);
    }, MAX_MS);
    return () => window.clearTimeout(timer);
  }, []);

  const skip = () => {
    markSeen();
    setVisible(false);
  };

  return (
    <AnimatePresence>
      {visible && (
        <motion.div
          key="splash"
          exit={{ opacity: 0 }}
          transition={{ duration: 0.5, ease: "easeOut" }}
          className="fixed inset-0 z-50 grid place-items-center bg-zinc-950 text-white [.splash-seen_&]:hidden"
        >
          <motion.p
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, ease: "easeOut" }}
            className="text-3xl font-semibold tracking-tight"
          >
            Acme Studio
          </motion.p>
          <button
            type="button"
            onClick={skip}
            className="absolute bottom-8 right-6 min-h-11 rounded-full px-5 text-sm text-white/70 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-white"
          >
            スキップ
          </button>
        </motion.div>
      )}
    </AnimatePresence>
  );
}