| @@ -3,89 +3,10 @@ | ||
| 3 | 3 | ?> |
| 4 | 4 | |
| 5 | 5 | <div class="templately-admin-body"> |
| 6 | 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> | |
| 7 | + <div class="templately-admin-preloader"> | |
| 8 | + <svg viewBox="0 0 512 512" width="50px" xmlns="http://www.w3.org/2000/svg"><circle cx="90.5" cy="454.8" fill="#ffb45a" r="57.2"></circle><circle cx="256" cy="454.8" fill="#ff7b8e" r="57.2"></circle><circle cx="421.5" cy="454.8" fill="#5ac0ff" r="57.2"></circle><path d="M356.5 94.5c-3.1 0-6.1.2-9.1.4C335 40.6 286.4 0 228.3 0c-15.3 0-29.9 2.8-43.4 8 0 15.3.1 32.9.2 40.4 15.6.1 45.8.2 59.1.2v57.8h-58.8v97.7h60.5c-1.7 4.3-4.3 10.7-5.4 13.2-11 26.5-38.3 41.3-66.6 36.2-26.9-4.9-46.9-27.8-48.4-55.9-.4-8.2-.2-16.5-.2-24.7V106h-20.7c-41.8 19.4-70.9 61.7-70.9 110.8 0 67.5 54.7 122.2 122.2 122.2h202c66.9-.7 120.8-55.1 120.8-122.2 0-67.5-54.7-122.3-122.2-122.3z" fill="#5633d1"></path></svg> | |
| 9 | + <p>Loading...</p> | |
| 89 | 10 | </div> |
| 90 | 11 | </div> |
| 91 | -</div> | |
| 12 | +</div> | |
