diff options
| author | mat <github@matdoes.dev> | 2022-02-21 21:27:59 -0600 |
|---|---|---|
| committer | mat <github@matdoes.dev> | 2022-02-21 21:27:59 -0600 |
| commit | 2071203061bfbb18f2c1991b45556b8ec47536a8 (patch) | |
| tree | ff654467ee6c1e2170e092b3af31711c1af8657d /src/lib/Collapsible.svelte | |
| parent | c680e2463046f4123f6ef3710e5cf9655cf3da57 (diff) | |
| download | skyblock-stats-2071203061bfbb18f2c1991b45556b8ec47536a8.tar.gz skyblock-stats-2071203061bfbb18f2c1991b45556b8ec47536a8.tar.bz2 skyblock-stats-2071203061bfbb18f2c1991b45556b8ec47536a8.zip | |
lazy-load collapsible when js is enabled
makes page load a tiny bit faster
Diffstat (limited to 'src/lib/Collapsible.svelte')
| -rw-r--r-- | src/lib/Collapsible.svelte | 17 |
1 files changed, 15 insertions, 2 deletions
diff --git a/src/lib/Collapsible.svelte b/src/lib/Collapsible.svelte index f3a28d2..867117d 100644 --- a/src/lib/Collapsible.svelte +++ b/src/lib/Collapsible.svelte @@ -3,15 +3,28 @@ Non-JS collapsible content. --> +<script lang="ts"> + let open: boolean +</script> -<details> +<details bind:open> <summary> <slot name="title"> <h2>Details</h2> </slot> </summary> <div> - <slot /> + <!-- + We do this so images inside the content are not loaded until it's + open. The browser (only tested on FF) doesn't handle this, although + it probably should. + --> + <noscript> + <slot /> + </noscript> + {#if open} + <slot /> + {/if} </div> </details> |