MediaHubPageSkeleton.js — Presto Player 4.3.3 | PluginProbe

PluginProbe ʕ •ᴥ•ʔ

Presto Player / 4.3.3

Presto Player v4.3.3

presto-player / src / admin / dashboard / components / Skeletons / MediaHubPageSkeleton.js

presto-player / src / admin / dashboard / components / Skeletons Last commit date

AnalyticsDetailSkeleton.js 3 months ago AnalyticsPageSkeleton.js 3 months ago DashboardSkeleton.js 3 months ago MediaHubPageSkeleton.js 2 months ago MediaHubRowSkeleton.js 2 months ago SettingsSectionSkeleton.js 3 months ago SettingsSkeleton.js 3 months ago UserAnalyticsDetailSkeleton.js 3 months ago

MediaHubPageSkeleton.js

151 lines

1	import React from "react";
2	import { __ } from "@wordpress/i18n";
3	import { Skeleton, Container, Table } from "@bsf/force-ui";
4
5	const MediaHubPageSkeleton = () => {
6	return (
7	<Container
8	className="p-8"
9	gap="md"
10	direction="column"
11	>
12	{/* Page Header Section */}
13	<Container className="w-full flex items-center justify-between">
14	{/* Title: "Media Hub" */}
15	<Container.Item grow={1}>
16	<Skeleton className="h-6 w-36 rounded-full" />
17	</Container.Item>
18	{/* Header Actions: Filter Icon + Search Bar */}
19	<Container.Item className="flex items-center gap-3">
20	{/* Filter Icon (ListFilter) */}
21	<Skeleton variant="circular" className="w-6 h-6" />
22	{/* Search Bar */}
23	<Skeleton className="h-8 w-64 rounded" />
24	</Container.Item>
25	</Container>
26
27	{/* Table Section */}
28	<Container gap="md" direction="column">
29	<div className="gap-0">
30	<Table>
31	{/* Table Header Row */}
32	<Table.Head className="bg-background-primary items-center">
33	{/* Checkbox Column Header */}
34	<Table.HeadCell className="w-10 px-3 py-3">
35	<Skeleton className="h-4 w-4 rounded" />
36	</Table.HeadCell>
37
38	{/* Title Column Header (with sort icon) */}
39	<Table.HeadCell className="cursor-pointer items-center gap-2 text-text-secondary">
40	<div className="flex items-center gap-2">
41	{/* "Title" text */}
42	<Skeleton className="h-4 w-16 rounded" />
43	{/* Sort icon (ChevronsUpDown) */}
44	<Skeleton className="h-3.5 w-3.5 rounded" />
45	</div>
46	</Table.HeadCell>
47
48	{/* Tags Column Header */}
49	<Table.HeadCell className="text-text-secondary items-center">
50	{/* "Tags" text */}
51	<Skeleton className="h-4 w-12 rounded" />
52	</Table.HeadCell>
53
54	{/* Shortcode Column Header */}
55	<Table.HeadCell className="text-text-secondary items-center">
56	{/* "Shortcode" text */}
57	<Skeleton className="h-4 w-20 rounded" />
58	</Table.HeadCell>
59
60	{/* Published on Column Header (with sort icon) */}
61	<Table.HeadCell className="cursor-pointer items-center gap-2 text-text-secondary">
62	<div className="flex items-center gap-2">
63	{/* "Published on" text */}
64	<Skeleton className="h-4 w-24 rounded" />
65	{/* Sort icon (ChevronsUpDown) */}
66	<Skeleton className="h-3.5 w-3.5 rounded" />
67	</div>
68	</Table.HeadCell>
69
70	{/* Actions Column Header */}
71	<Table.HeadCell className="items-center justify-center">
72	<span className="sr-only">{__("Actions", "presto-player")}</span>
73	</Table.HeadCell>
74	</Table.Head>
75
76	{/* Table Body Rows */}
77	<Table.Body>
78	{Array.from({ length: 10 }).map((_, idx) => (
79	<Table.Row key={idx} className="border-b border-border-subtle">
80	{/* Checkbox Cell */}
81	<Table.Cell className="w-10 px-3 py-4">
82	<Skeleton className="h-4 w-4 rounded" />
83	</Table.Cell>
84
85	{/* Title Cell: Poster Image + Media Title */}
86	<Table.Cell className="min-w-[300px] text-left px-3 py-4">
87	<div className="flex items-center gap-3">
88	{/* Poster Image (75px × ~42px to match 16:9 thumbnail). Force UI's
89	* Skeleton ships with a default `h-3`, which beats `aspect-video`
90	* unless we set an explicit height. */}
91	<Skeleton
92	className="flex-shrink-0 rounded w-[75px] h-[42px]"
93	/>
94	{/* Media Title */}
95	<Skeleton className="h-4 w-40 rounded-full flex-1" />
96	</div>
97	</Table.Cell>
98
99	{/* Tags Cell: Multiple Tag Badges */}
100	<Table.Cell className="w-[240px] text-left px-3 py-4">
101	<div className="flex flex-wrap gap-1">
102	{/* Tag Badge 1 */}
103	<Skeleton className="h-6 w-16 rounded-full" />
104	{/* Tag Badge 2 */}
105	<Skeleton className="h-6 w-20 rounded-full" />
106	{/* Tag Badge 3 */}
107	<Skeleton className="h-6 w-14 rounded-full" />
108	</div>
109	</Table.Cell>
110
111	{/* Shortcode Cell: Input Field + Copy Button */}
112	<Table.Cell className="w-[1%] whitespace-nowrap text-left px-3 py-4">
113	<div className="flex items-center gap-2">
114	{/* Shortcode Input Field */}
115	<Skeleton className="h-7 w-40 rounded" />
116	{/* Copy Button */}
117	<Skeleton className="h-4 w-4 rounded" />
118	</div>
119	</Table.Cell>
120
121	{/* Published Date Cell */}
122	<Table.Cell className="w-[170px] text-left px-3 py-4">
123	{/* Published Date Text */}
124	<Skeleton className="h-4 w-28 rounded" />
125	</Table.Cell>
126
127	{/* Actions Cell: View, Edit, Settings, More Options Buttons */}
128	<Table.Cell className="w-[130px] text-right px-3 py-4">
129	<div className="flex items-center justify-center gap-2">
130	{/* View Button (Eye icon) */}
131	<Skeleton className="h-5 w-5 rounded-full" />
132	{/* Edit Button (PencilLine icon) */}
133	<Skeleton className="h-5 w-5 rounded-full" />
134	{/* Settings Button (Settings icon) */}
135	<Skeleton className="h-5 w-5 rounded-full" />
136	{/* More Options Button (Ellipsis icon) */}
137	<Skeleton className="h-5 w-5 rounded-full" />
138	</div>
139	</Table.Cell>
140	</Table.Row>
141	))}
142	</Table.Body>
143	</Table>
144	</div>
145	</Container>
146	</Container>
147	);
148	};
149
150	export default MediaHubPageSkeleton;
151