← All changes | views/template-library.php +70 -41 3.7.1 → 3.8.0 View file →

		@@ -1,18 +1,27 @@
1	1	<?php
2	2	defined('ABSPATH') or die( 'Access denied!' ); // Avoid direct file request
	3	+
	4	+ // Passed by Admin::display() — true only for the template-library grid
	5	+ // route (`?path=elementor/packs` and friends). Every other route (clouds,
	6	+ // downloads, subscription, settings, item-detail, saved templates, ...)
	7	+ // falls back to $show_grid_skeleton = false below.
	8	+ $show_grid_skeleton = $show_grid_skeleton ?? true;
3	9	?>
4	10
5	11	<div class="templately-admin-body">
6	12	<div id="templatelyAdmin">
7	13	<?php
8		- // Server-rendered full-page skeleton (no logo). Shown only until the React
9		- // app mounts into #templatelyAdmin and replaces it, so a refresh shows a
10		- // complete skeleton instantly — top nav, header, filter toolbar and the
11		- // card grid — instead of a logo flash or a blank gap. Layout classes mirror
12		- // the real components (TopNavigation, NewHeader, Filter, TemplateGridSkeleton);
13		- // the grey placeholder blocks are sized with inline styles so they render
14		- // correctly against the already-compiled admin CSS (no rebuild required).
	14	+ // Server-rendered full-page skeleton (no logo, except the generic-shell
	15	+ // branch below). Shown only until the React app mounts into
	16	+ // #templatelyAdmin and replaces it, so a refresh shows something
	17	+ // instantly instead of a blank gap. Top nav + header are shared chrome
	18	+ // that's correct for every route, so they always render; only the
	19	+ // content area below them is route-aware. Layout classes mirror the
	20	+ // real components (TopNavigation, NewHeader, Filter,
	21	+ // TemplateGridSkeleton); the grey placeholder blocks are sized with
	22	+ // inline styles so they render correctly against the already-compiled
	23	+ // admin CSS (no rebuild required).
15	24	?>
16	25	<div class="templately-admin-skeleton fixed inset-0 h-screen w-screen flex flex-col bg-surface-primary overflow-hidden" aria-busy="true" aria-hidden="true">
17	26
18	27	<?php // Top navigation — mirrors TopNavigation.js (h-9) ?>
		@@ -44,48 +53,68 @@
44	53	</div>
45	54	</div>
46	55	</div>
47	56
48		- <?php // Outlet content — filter toolbar + card grid ?>
49		- <div class="grow overflow-hidden flex flex-col">
	57	+ <?php if ( $show_grid_skeleton ) : ?>
	58	+ <?php // Outlet content — filter toolbar + card grid ?>
	59	+ <div class="grow overflow-hidden flex flex-col">
50	60
51		- <?php // Filter toolbar — mirrors FilterBarSkeleton.js ?>
52		- <div class="shrink-0 w-full flex pb-4 md:pb-6 lg:pb-8">
53		- <div class="px-4 w-full md:px-6 lg:px-7 py-2 h-18 shrink-0 flex gap-x-4 md:gap-x-6 items-center">
54		- <span class="motion-safe:animate-pulse motion-reduce:animate-none shrink-0" style="display:block;background:#F1F1F7;border-radius:9999px;width:6rem;height:2.5rem;"></span>
55		- <div class="hidden md:!flex items-center gap-x-2 overflow-hidden">
56		- <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:4rem;height:.75rem;"></span>
57		- <?php foreach ( array( '7rem', '5rem', '6rem', '7rem', '6rem', '5rem' ) as $chip_w ) : ?>
58		- <span class="motion-safe:animate-pulse motion-reduce:animate-none shrink-0" style="display:block;background:#F1F1F7;border-radius:9999px;width:<?php echo esc_attr( $chip_w ); ?>;height:2.5rem;"></span>
59		- <?php endforeach; ?>
	61	+ <?php // Filter toolbar — mirrors FilterBarSkeleton.js ?>
	62	+ <div class="shrink-0 w-full flex pb-4 md:pb-6 lg:pb-8">
	63	+ <div class="px-4 w-full md:px-6 lg:px-7 py-2 h-18 shrink-0 flex gap-x-4 md:gap-x-6 items-center">
	64	+ <span class="motion-safe:animate-pulse motion-reduce:animate-none shrink-0" style="display:block;background:#F1F1F7;border-radius:9999px;width:6rem;height:2.5rem;"></span>
	65	+ <div class="hidden md:!flex items-center gap-x-2 overflow-hidden">
	66	+ <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:4rem;height:.75rem;"></span>
	67	+ <?php foreach ( array( '7rem', '5rem', '6rem', '7rem', '6rem', '5rem' ) as $chip_w ) : ?>
	68	+ <span class="motion-safe:animate-pulse motion-reduce:animate-none shrink-0" style="display:block;background:#F1F1F7;border-radius:9999px;width:<?php echo esc_attr( $chip_w ); ?>;height:2.5rem;"></span>
	69	+ <?php endforeach; ?>
	70	+ </div>
	71	+ <div class="ms-auto flex items-center gap-3 md:gap-4 shrink-0">
	72	+ <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:9999px;width:3.75rem;height:2.5rem;"></span>
	73	+ <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:9999px;width:6.25rem;height:2.5rem;"></span>
	74	+ </div>
60	75	</div>
61		- <div class="ms-auto flex items-center gap-3 md:gap-4 shrink-0">
62		- <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:9999px;width:3.75rem;height:2.5rem;"></span>
63		- <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:9999px;width:6.25rem;height:2.5rem;"></span>
64		- </div>
65	76	</div>
66		- </div>
67	77
68		- <?php // Card grid — mirrors TemplateGridSkeleton.js ?>
69		- <div class="grow flex flex-col px-4 md:px-6 lg:px-7 pb-8 overflow-hidden">
70		- <div class="grid grid-cols-auto-80 gap-x-4 md:gap-x-6 gap-y-8">
71		- <?php for ( $i = 0; $i < 12; $i++ ) : ?>
72		- <div class="w-full flex flex-col gap-3.5 mb-0">
73		- <div class="w-full bg-surface-secondary p-3 rounded-sm border border-solid border-border-secondary">
74		- <div class="w-full motion-safe:animate-pulse motion-reduce:animate-none" style="background:#F1F1F7;aspect-ratio:100/114.65;"></div>
	78	+ <?php // Card grid — mirrors TemplateGridSkeleton.js ?>
	79	+ <div class="grow flex flex-col px-4 md:px-6 lg:px-7 pb-8 overflow-hidden">
	80	+ <div class="grid grid-cols-auto-80 gap-x-4 md:gap-x-6 gap-y-8">
	81	+ <?php for ( $i = 0; $i < 12; $i++ ) : ?>
	82	+ <div class="w-full flex flex-col gap-3.5 mb-0">
	83	+ <div class="w-full bg-surface-secondary p-3 rounded-sm border border-solid border-border-secondary">
	84	+ <div class="w-full motion-safe:animate-pulse motion-reduce:animate-none" style="background:#F1F1F7;aspect-ratio:100/114.65;"></div>
	85	+ </div>
	86	+ <div class="flex flex-col gap-3">
	87	+ <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:75%;height:.875rem;"></span>
	88	+ <span class="w-full flex items-center gap-2">
	89	+ <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:6rem;height:2rem;"></span>
	90	+ <span class="ms-auto motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:3rem;height:1rem;"></span>
	91	+ </span>
	92	+ </div>
75	93	</div>
76		- <div class="flex flex-col gap-3">
77		- <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:75%;height:.875rem;"></span>
78		- <span class="w-full flex items-center gap-2">
79		- <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:6rem;height:2rem;"></span>
80		- <span class="ms-auto motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:3rem;height:1rem;"></span>
81		- </span>
82		- </div>
83		- </div>
84		- <?php endfor; ?>
	94	+ <?php endfor; ?>
	95	+ </div>
85	96	</div>
	97	+
86	98	</div>
87		-
88		- </div>
	99	+ <?php else : ?>
	100	+ <?php
	101	+ // Generic shell — every other route (clouds, downloads, favourites,
	102	+ // manage-sites, subscription, purchased-items, ai-sites, settings,
	103	+ // item-detail, saved templates). None of them look like the template
	104	+ // grid, and their real shapes vary too much to hand-port here, so this
	105	+ // just holds the space with the same centered animated logo `Loader`
	106	+ // shows by default once React takes over — no layout-shape guess to
	107	+ // get wrong or keep in sync.
	108	+ ?>
	109	+ <div class="grow flex items-center justify-center">
	110	+ <img
	111	+ src="<?php echo esc_url( templately()->assets->icon( 'logos/loading-logo.gif' ) ); ?>"
	112	+ alt="Templately"
	113	+ width="120"
	114	+ height="120"
	115	+ />
	116	+ </div>
	117	+ <?php endif; ?>
89	118	</div>
90	119	</div>
91	120	</div>