|
14 | 14 | } catch {} |
15 | 15 | })() |
16 | 16 | </script> |
| 17 | + <script> |
| 18 | + // Smooth over the moment before custom elements upgrade/render (esp. on cache-hot reloads). |
| 19 | + document.documentElement.classList.add('app-loading') |
| 20 | + ;(() => { |
| 21 | + const reveal = () => document.documentElement.classList.remove('app-loading') |
| 22 | + const timeout = window.setTimeout(reveal, 2000) |
| 23 | + |
| 24 | + Promise.all([ |
| 25 | + customElements.whenDefined('form-field'), |
| 26 | + customElements.whenDefined('form-card'), |
| 27 | + customElements.whenDefined('dark-toggle'), |
| 28 | + ]).then(() => { |
| 29 | + window.clearTimeout(timeout) |
| 30 | + // form-card defers its own render with requestAnimationFrame; wait for that. |
| 31 | + requestAnimationFrame(() => window.setTimeout(reveal, 50)) |
| 32 | + }) |
| 33 | + })() |
| 34 | + </script> |
| 35 | + <style> |
| 36 | + main, |
| 37 | + footer { |
| 38 | + opacity: 0; |
| 39 | + visibility: hidden; |
| 40 | + transform: translateY(2px); |
| 41 | + transition: |
| 42 | + opacity 200ms ease, |
| 43 | + transform 200ms ease; |
| 44 | + } |
| 45 | + |
| 46 | + html:not(.app-loading) main, |
| 47 | + html:not(.app-loading) footer { |
| 48 | + opacity: 1; |
| 49 | + visibility: visible; |
| 50 | + transform: none; |
| 51 | + } |
| 52 | + |
| 53 | + @media (prefers-reduced-motion: reduce) { |
| 54 | + main, |
| 55 | + footer { |
| 56 | + transition: none; |
| 57 | + } |
| 58 | + } |
| 59 | + </style> |
17 | 60 | <link rel="stylesheet" href="demo-src.css" /> |
18 | | - <script type="module" src="form-field.ts"></script> |
19 | | - <script type="module" src="form-card.ts"></script> |
20 | | - <script type="module" src="dark-toggle.ts"></script> |
| 61 | + <link rel="modulepreload" href="form-field.ts" /> |
| 62 | + <link rel="modulepreload" href="form-card.ts" /> |
| 63 | + <link rel="modulepreload" href="dark-toggle.ts" /> |
| 64 | + <script type="module" src="form-field.ts" async></script> |
| 65 | + <script type="module" src="form-card.ts" async></script> |
| 66 | + <script type="module" src="dark-toggle.ts" async></script> |
21 | 67 | </head> |
22 | 68 |
|
23 | 69 | <body |
@@ -70,7 +116,7 @@ <h1 class="text-center text-3xl font-medium sm:text-4xl"> |
70 | 116 | </nav> |
71 | 117 |
|
72 | 118 | <main |
73 | | - class="mx-2 mb-6 max-w-3xl rounded-xl border border-indigo-100 bg-indigo-200 p-4 shadow-xl sm:mx-4 sm:col-span-2 sm:p-8 md:mx-0 md:mr-4 md:ml-0 md:max-w-none lg:col-span-1 dark:border-indigo-100/10 dark:bg-black/50" |
| 119 | + class="mx-2 mb-6 max-w-3xl rounded-xl border border-indigo-100 bg-indigo-200 p-4 shadow-xl sm:col-span-2 sm:mx-4 sm:p-8 md:mx-0 md:mr-4 md:ml-0 md:max-w-none lg:col-span-1 dark:border-indigo-100/10 dark:bg-black/50" |
74 | 120 | > |
75 | 121 | <section class="mb-6"> |
76 | 122 | <p class="mb-4"> |
|
0 commit comments