AnalyticsDetailSkeleton.js
2 months ago
AnalyticsPageSkeleton.js
2 months ago
DashboardSkeleton.js
2 months ago
MediaHubPageSkeleton.js
1 month ago
MediaHubRowSkeleton.js
2 months ago
SettingsSectionSkeleton.js
2 months ago
SettingsSkeleton.js
2 months ago
UserAnalyticsDetailSkeleton.js
2 months ago
MediaHubRowSkeleton.js
64 lines
| 1 | import React from "react"; |
| 2 | import { Skeleton, Table } from "@bsf/force-ui"; |
| 3 | |
| 4 | /** |
| 5 | * Single skeleton row mirroring the live MediaRow column layout |
| 6 | * (Media, Status, Tags, Shortcode, Published on, Actions). |
| 7 | * |
| 8 | * Shared between the first-load page skeleton and the in-place |
| 9 | * refetch skeleton so paging/filtering/sorting never falls back to |
| 10 | * "stale rows with no feedback". |
| 11 | */ |
| 12 | const MediaHubRowSkeleton = () => { |
| 13 | return ( |
| 14 | <Table.Row className="border-b border-border-subtle"> |
| 15 | {/* Media: poster thumbnail + title */} |
| 16 | <Table.Cell className="text-left px-3 py-4" style={{ maxWidth: 0 }}> |
| 17 | <div className="flex items-center gap-3"> |
| 18 | <Skeleton className="flex-shrink-0 rounded w-[75px] h-[42px]" /> |
| 19 | <Skeleton className="h-4 w-40 rounded-full flex-1" /> |
| 20 | </div> |
| 21 | </Table.Cell> |
| 22 | |
| 23 | {/* Status badge */} |
| 24 | <Table.Cell className="text-left px-3 py-4"> |
| 25 | <Skeleton className="h-5 w-16 rounded-full" /> |
| 26 | </Table.Cell> |
| 27 | |
| 28 | {/* Tags: a few badges */} |
| 29 | <Table.Cell className="text-left px-3 py-4"> |
| 30 | <div className="flex flex-wrap gap-1"> |
| 31 | <Skeleton className="h-5 w-16 rounded-full" /> |
| 32 | <Skeleton className="h-5 w-20 rounded-full" /> |
| 33 | <Skeleton className="h-5 w-14 rounded-full" /> |
| 34 | </div> |
| 35 | </Table.Cell> |
| 36 | |
| 37 | {/* Shortcode field + copy icon */} |
| 38 | <Table.Cell className="whitespace-nowrap text-left px-3 py-4"> |
| 39 | <div className="flex items-center gap-2"> |
| 40 | <Skeleton className="h-7 w-40 rounded" /> |
| 41 | <Skeleton className="h-4 w-4 rounded" /> |
| 42 | </div> |
| 43 | </Table.Cell> |
| 44 | |
| 45 | {/* Published date */} |
| 46 | <Table.Cell className="text-left whitespace-nowrap px-3 py-4"> |
| 47 | <Skeleton className="h-4 w-28 rounded" /> |
| 48 | </Table.Cell> |
| 49 | |
| 50 | {/* Actions: 4 icon buttons */} |
| 51 | <Table.Cell className="text-right px-3 py-4"> |
| 52 | <div className="flex items-center justify-center gap-2"> |
| 53 | <Skeleton className="h-5 w-5 rounded-full" /> |
| 54 | <Skeleton className="h-5 w-5 rounded-full" /> |
| 55 | <Skeleton className="h-5 w-5 rounded-full" /> |
| 56 | <Skeleton className="h-5 w-5 rounded-full" /> |
| 57 | </div> |
| 58 | </Table.Cell> |
| 59 | </Table.Row> |
| 60 | ); |
| 61 | }; |
| 62 | |
| 63 | export default MediaHubRowSkeleton; |
| 64 |