| 1 |
<?php |
| 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; |
| 9 |
?> |
| 10 |
|
| 11 |
<div class="templately-admin-body"> |
| 12 |
<div id="templatelyAdmin"> |
| 13 |
<?php |
| 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). |
| 24 |
?> |
| 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"> |
| 26 |
|
| 27 |
<?php // Top navigation — mirrors TopNavigation.js (h-9) ?> |
| 28 |
<div class="shrink-0 h-9 flex items-center justify-between px-4 md:px-6 lg:px-7 border-b border-solid border-border-secondary"> |
| 29 |
<span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:12rem;height:.85rem;"></span> |
| 30 |
<div class="flex items-center gap-4"> |
| 31 |
<span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:6.5rem;height:.85rem;"></span> |
| 32 |
<span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:4.5rem;height:.85rem;"></span> |
| 33 |
</div> |
| 34 |
</div> |
| 35 |
|
| 36 |
<?php // Header — mirrors NewHeader (h-11 md:h-18): logo + switcher | search | support + avatar | close ?> |
| 37 |
<div class="shrink-0 w-full flex items-center gap-x-2 h-11 md:h-18 border-b border-solid border-border-secondary"> |
| 38 |
<div class="flex items-center gap-3 ps-4 md:ps-6 lg:ps-7 shrink-0"> |
| 39 |
<span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:9999px;width:2rem;height:2rem;"></span> |
| 40 |
<span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:5rem;height:1rem;"></span> |
| 41 |
<span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.5rem;width:7rem;height:2rem;"></span> |
| 42 |
</div> |
| 43 |
<div class="grow hidden md:!flex justify-center items-center lg:pe-[2.78%]"> |
| 44 |
<span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:9999px;width:100%;max-width:37.5rem;height:2.75rem;"></span> |
| 45 |
</div> |
| 46 |
<div class="ml-auto md:ml-0 flex items-center self-stretch"> |
| 47 |
<div class="hidden md:!flex items-center h-full pe-3 gap-x-3"> |
| 48 |
<span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:6rem;height:.85rem;"></span> |
| 49 |
<span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:9999px;width:2rem;height:2rem;"></span> |
| 50 |
</div> |
| 51 |
<div class="h-11 md:h-18 w-11 md:w-18 shrink-0 flex items-center justify-center border-s border-solid border-border-secondary"> |
| 52 |
<span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:1.5rem;height:1.5rem;"></span> |
| 53 |
</div> |
| 54 |
</div> |
| 55 |
</div> |
| 56 |
|
| 57 |
<?php if ( $show_grid_skeleton ) : ?> |
| 58 |
<?php // Outlet content — filter toolbar + card grid ?> |
| 59 |
<div class="grow overflow-hidden flex flex-col"> |
| 60 |
|
| 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> |
| 75 |
</div> |
| 76 |
</div> |
| 77 |
|
| 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> |
| 93 |
</div> |
| 94 |
<?php endfor; ?> |
| 95 |
</div> |
| 96 |
</div> |
| 97 |
|
| 98 |
</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; ?> |
| 118 |
</div> |
| 119 |
</div> |
| 120 |
</div> |
| 121 |
|
