src/components/auth-loading.tsx

Linked repository file from this build.

"use client";

import { useClerk } from "@clerk/nextjs";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";

/** Clerk removes this fallback when its authentication form has mounted. */
export function AuthLoading() {
  const { status } = useClerk();
  const [slow, setSlow] = useState(false);
  useEffect(() => {
    const timer = setTimeout(() => setSlow(true), 15_000);
    return () => clearTimeout(timer);
  }, []);
  const failed = status === "error" || slow;
  return (
    <section
      role={failed ? "alert" : "status"}
      className="w-full max-w-sm space-y-3 rounded-lg border bg-card p-5 text-card-foreground"
    >
      <p className="font-medium">
        {failed ? "The sign-in form has not loaded." : "Loading sign-in form…"}
      </p>
      {failed && (
        <>
          <p className="text-sm text-muted-foreground">
            Check your connection and reload the page. If this continues, contact the app
            administrator.
          </p>
          <Button type="button" variant="outline" onClick={() => window.location.reload()}>
            Reload page
          </Button>
        </>
      )}
    </section>
  );
}