FPSMS-frontend/src/components/PoWorkbench/search/PoWorkbenchSearchResultsListSkeleton.tsx

"use client";

import Box from "@mui/material/Box";
import Skeleton from "@mui/material/Skeleton";
import Stack from "@mui/material/Stack";
import { useTheme } from "@mui/material/styles";

// Placeholder row count for first-load skeleton (layout only; unrelated to `PO_WORKBENCH_LIST_PAGE_SIZE`).
const SKELETON_PLACEHOLDER_ROW_COUNT = 8;

const ROW_SHELL_SX = {
  pt: 1.25,
  pb: 1,
  px: 2,
  borderBottom: 1,
  borderColor: "divider",
  borderLeftStyle: "solid",
  borderLeftWidth: 10,
  borderLeftColor: "transparent",
} as const;

function SearchResultRowSkeleton() {
  const theme = useTheme();
  const body1Skeleton = {
    fontSize: theme.typography.body1.fontSize,
    lineHeight: theme.typography.body1.lineHeight,
  };
  const body2Skeleton = {
    fontSize: theme.typography.body2.fontSize,
    lineHeight: theme.typography.body2.lineHeight,
  };

  return (
    <Box sx={ROW_SHELL_SX} aria-hidden>
      <Stack spacing={0.25} sx={{ minWidth: 0, width: "100%" }}>
        <Stack
          direction="row"
          alignItems="center"
          justifyContent="space-between"
          spacing={1}
          sx={{ minWidth: 0 }}
        >
          <Skeleton variant="text" width="min(200px, 55%)" sx={body1Skeleton} />
          <Stack direction="row" spacing={0.5} flexShrink={0}>
            <Skeleton
              variant="rounded"
              width={72}
              height={26}
              sx={{ borderRadius: 1 }}
            />
            <Skeleton
              variant="rounded"
              width={80}
              height={26}
              sx={{ borderRadius: 1 }}
            />
          </Stack>
        </Stack>
        <Skeleton variant="text" width="min(160px, 70%)" sx={body2Skeleton} />
        <Stack
          direction="row"
          spacing={2}
          flexWrap="wrap"
          useFlexGap
          sx={{ pt: 0.25 }}
        >
          <Stack direction="row" spacing={0.75} alignItems="center">
            <Skeleton variant="circular" width={16} height={16} />
            <Skeleton variant="text" width={88} sx={body2Skeleton} />
          </Stack>
          <Stack direction="row" spacing={0.75} alignItems="center">
            <Skeleton variant="circular" width={16} height={16} />
            <Skeleton variant="text" width={88} sx={body2Skeleton} />
          </Stack>
        </Stack>
      </Stack>
    </Box>
  );
}

/** Placeholder rows while the first `/po/list` page is loading (matches list row layout). */
export default function PoWorkbenchSearchResultsListSkeleton() {
  return (
    <Box role="status" aria-busy="true" sx={{ width: "100%" }}>
      {Array.from({ length: SKELETON_PLACEHOLDER_ROW_COUNT }, (_, i) => (
        <SearchResultRowSkeleton key={i} />
      ))}
    </Box>
  );
}