diff options
| author | copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> | 2025-11-06 22:52:02 +0000 |
|---|---|---|
| committer | Ariel Costas Guerrero <ariel@costas.dev> | 2025-11-07 10:47:20 +0100 |
| commit | ee77f38cdb324cbcf12518490df77fc9e6b89282 (patch) | |
| tree | 407f64a434291e1e375e6a1ccb55f59fa886a1ef /src/frontend/app/components/SchedulesTableSkeleton.tsx | |
| parent | e51cdd89afc08274ca622e18b8127feca29e90a3 (diff) | |
Improve gallery scroll indicators and format code
Co-authored-by: arielcostas <94913521+arielcostas@users.noreply.github.com>
Diffstat (limited to 'src/frontend/app/components/SchedulesTableSkeleton.tsx')
| -rw-r--r-- | src/frontend/app/components/SchedulesTableSkeleton.tsx | 42 |
1 files changed, 32 insertions, 10 deletions
diff --git a/src/frontend/app/components/SchedulesTableSkeleton.tsx b/src/frontend/app/components/SchedulesTableSkeleton.tsx index 50ba94d..3ae9729 100644 --- a/src/frontend/app/components/SchedulesTableSkeleton.tsx +++ b/src/frontend/app/components/SchedulesTableSkeleton.tsx @@ -8,7 +8,7 @@ interface EstimatesTableSkeletonProps { } export const SchedulesTableSkeleton: React.FC<EstimatesTableSkeletonProps> = ({ - rows = 3 + rows = 3, }) => { const { t } = useTranslation(); @@ -32,13 +32,23 @@ export const SchedulesTableSkeleton: React.FC<EstimatesTableSkeletonProps> = ({ {Array.from({ length: rows }, (_, index) => ( <tr key={`skeleton-${index}`}> <td> - <Skeleton width="40px" height="24px" style={{ borderRadius: "4px" }} /> + <Skeleton + width="40px" + height="24px" + style={{ borderRadius: "4px" }} + /> </td> <td> <Skeleton width="120px" /> </td> <td> - <div style={{ display: "flex", flexDirection: "column", gap: "2px" }}> + <div + style={{ + display: "flex", + flexDirection: "column", + gap: "2px", + }} + > <Skeleton width="60px" /> <Skeleton width="40px" /> </div> @@ -59,10 +69,9 @@ interface EstimatesGroupedSkeletonProps { rowsPerGroup?: number; } -export const EstimatesGroupedSkeleton: React.FC<EstimatesGroupedSkeletonProps> = ({ - groups = 3, - rowsPerGroup = 2 -}) => { +export const EstimatesGroupedSkeleton: React.FC< + EstimatesGroupedSkeletonProps +> = ({ groups = 3, rowsPerGroup = 2 }) => { const { t } = useTranslation(); return ( @@ -85,17 +94,30 @@ export const EstimatesGroupedSkeleton: React.FC<EstimatesGroupedSkeletonProps> = {Array.from({ length: groups }, (_, groupIndex) => ( <React.Fragment key={`group-${groupIndex}`}> {Array.from({ length: rowsPerGroup }, (_, rowIndex) => ( - <tr key={`skeleton-${groupIndex}-${rowIndex}`} className={rowIndex === 0 ? "group-start" : ""}> + <tr + key={`skeleton-${groupIndex}-${rowIndex}`} + className={rowIndex === 0 ? "group-start" : ""} + > <td> {rowIndex === 0 && ( - <Skeleton width="40px" height="24px" style={{ borderRadius: "4px" }} /> + <Skeleton + width="40px" + height="24px" + style={{ borderRadius: "4px" }} + /> )} </td> <td> <Skeleton width="120px" /> </td> <td> - <div style={{ display: "flex", flexDirection: "column", gap: "2px" }}> + <div + style={{ + display: "flex", + flexDirection: "column", + gap: "2px", + }} + > <Skeleton width="60px" /> <Skeleton width="40px" /> </div> |