/**
 * Session validation loading indicator.
 *
 * Displayed on app mount while the backend validates the session.
 */

import { makeStyles, Spinner } from "@fluentui/react-components";
import React from "react";

const useStyles = makeStyles({
  container: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    height: "100vh",
    width: "100%",
    flexDirection: "column",
    gap: "16px",
  },
});

/**
 * Loading indicator shown during session validation on app mount.
 *
 * @returns React element displaying a centered spinner and message.
 */
export function SessionValidationLoading(): React.JSX.Element {
  const styles = useStyles();

  return (
    <div className={styles.container}>
      <Spinner size="large" label="Validating session…" />
    </div>
  );
}
