| 1 |
<?php |
| 2 |
defined('ABSPATH') or die( 'Access denied!' ); // Avoid direct file request |
| 3 |
?> |
| 4 |
|
| 5 |
<div class="templately-admin-body"> |
| 6 |
<div id="templatelyAdmin"> |
| 7 |
<?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). |
| 15 |
?> |
| 16 |
<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 |
|
| 18 |
<?php // Top navigation — mirrors TopNavigation.js (h-9) ?> |
| 19 |
<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"> |
| 20 |
<span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:12rem;height:.85rem;"></span> |
| 21 |
<div class="flex items-center gap-4"> |
| 22 |
<span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:6.5rem;height:.85rem;"></span> |
| 23 |
<span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:4.5rem;height:.85rem;"></span> |
| 24 |
</div> |
| 25 |
</div> |
| 26 |
|
| 27 |
<?php // Header — mirrors NewHeader (h-11 md:h-18): logo + switcher | search | support + avatar | close ?> |
| 28 |
<div class="shrink-0 w-full flex items-center gap-x-2 h-11 md:h-18 border-b border-solid border-border-secondary"> |
| 29 |
<div class="flex items-center gap-3 ps-4 md:ps-6 lg:ps-7 shrink-0"> |
| 30 |
<span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:9999px;width:2rem;height:2rem;"></span> |
| 31 |
<span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:5rem;height:1rem;"></span> |
| 32 |
<span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.5rem;width:7rem;height:2rem;"></span> |
| 33 |
</div> |
| 34 |
<div class="grow hidden md:!flex justify-center items-center lg:pe-[2.78%]"> |
| 35 |
<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> |
| 36 |
</div> |
| 37 |
<div class="ml-auto md:ml-0 flex items-center self-stretch"> |
| 38 |
<div class="hidden md:!flex items-center h-full pe-3 gap-x-3"> |
| 39 |
<span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:6rem;height:.85rem;"></span> |
| 40 |
<span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:9999px;width:2rem;height:2rem;"></span> |
| 41 |
</div> |
| 42 |
<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"> |
| 43 |
<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> |
| 44 |
</div> |
| 45 |
</div> |
| 46 |
</div> |
| 47 |
|
| 48 |
<?php // Outlet content — filter toolbar + card grid ?> |
| 49 |
<div class="grow overflow-hidden flex flex-col"> |
| 50 |
|
| 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; ?> |
| 60 |
</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 |
</div> |
| 66 |
</div> |
| 67 |
|
| 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> |
| 75 |
</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; ?> |
| 85 |
</div> |
| 86 |
</div> |
| 87 |
|
| 88 |
</div> |
| 89 |
</div> |
| 90 |
</div> |
| 91 |
</div> |
| 92 |
|
