import React from 'react'; import { VisuallyHidden } from '@leafygreen-ui/a11y'; import { cx } from '@leafygreen-ui/emotion'; import LeafyGreenProvider, { useDarkMode, } from '@leafygreen-ui/leafygreen-provider'; import { BaseFontSize } from '@leafygreen-ui/tokens'; import { Body, useUpdatedBaseFontSize } from '@leafygreen-ui/typography'; import { Skeleton } from '..'; import { baseStyles, cellStyles, columnHeaderStyles, firstRowStyles, headerCellStyles, tableHeadStyles, } from './TableSkeleton.styles'; import { TableSkeletonProps } from '.'; export function TableSkeleton({ darkMode: darkModeProp, baseFontSize: baseFontSizeProp = BaseFontSize.Body1, enableAnimations, numRows = 5, numCols = 4, columnLabels, className, ...rest }: TableSkeletonProps) { const { darkMode, theme } = useDarkMode(darkModeProp); const baseFontSize = useUpdatedBaseFontSize(baseFontSizeProp); return ( {[...Array(numCols)].map((_, i) => { const hasLabel = columnLabels && columnLabels[i]; return ( ); })} {[...Array(numRows)].map((_, i) => ( {[...Array(numCols)].map((_, j) => ( ))} ))}

{hasLabel ? ( {columnLabels[i]} ) : ( <> Loading )}

); } TableSkeleton.displayName = 'TableSkeleton';