Loading state

import {
  LockerversePayment,
  type LockerversePaymentTheme,
} from "@lockerverse/react/payment";
import "@lockerverse/react/payment.css";
import { useLockerverseWidget } from "@lockerverse/react/widget";
import { useMemo } from "react";
import { exampleRuntime } from "../example-runtime";

export default function LoadingExample({
  theme = "light",
}: {
  theme?: LockerversePaymentTheme;
}) {
  const delayedFetch = useMemo(
    () => async (input: RequestInfo | URL, init?: RequestInit) => {
      const [response] = await Promise.all([
        globalThis.fetch(input, init),
        new Promise<void>((resolve) => setTimeout(resolve, 3000)),
      ]);
      return response;
    },
    []
  );
  const widget = useLockerverseWidget({
    apiBaseUrl: exampleRuntime.apiBaseUrl,
    communitySlug: exampleRuntime.communitySlug,
    environment: "development",
    fetch: delayedFetch,
    sentryDsn: null,
    widgetSlug: exampleRuntime.widgetSlug,
  });

  return (
    <div className="loading-example">
      <button
        className="example-secondary-button"
        onClick={widget.refresh}
        type="button"
      >
        Replay loading state
      </button>
      <LockerversePayment
        selection={[{ productSlug: "adult", quantity: 1 }]}
        style={{ "--lockerverse-accent": "#f1511b" }}
        theme={theme}
        widget={widget}
      />
    </div>
  );
}