Fix the Svlete stuff, time to 'trim the fat'

NebulaServices · Dec 4, 2024 · 6c0cbf2 · 6c0cbf2
1 parent b0fca23
commit 6c0cbf2
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 86 deletions.
diff --git a/src/components/catalog/CatalogCard.svelte b/src/components/catalog/CatalogCard.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-import { Suspense } from "@svelte-drama/suspense";
+import { Suspense, createSuspense } from "@svelte-drama/suspense";
+const suspend = createSuspense();
 import { Settings } from "@utils/settings/index";
 export let page;
 export let lang;
@@ -12,36 +13,38 @@ const assets = getAssets();
 </script>
 
 <div class="text-3xl font-roboto font-bold text-text-color p-10">
-    <Suspense let:suspend>
-        <div slot="loading">
+    <Suspense>
+        {#snippet loading()}
             <p class="text-4xl"> Loading... </p>
-        </div>
-        {#await suspend(assets) then data}
-            {#if Object.keys(data).length > 0}
-                <div class="flex flex-row gap-6 flex-wrap justify-center">
-                    {#each Object.entries(data) as [key, asset]}
-                        <a href={`/${lang}/catalog/package/${key}`}>
-                            <div class="bg-navbar-color w-64 rounded-3xl shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105">
-                                <img src={`/packages/${key}/${asset.image}`} alt={asset.title} class="w-full h-40 object-cover" />
-                                <div class="p-6 text-sm">
-                                    <p class="font-semibold text-2xl mb-2"> {asset.title} </p>
-                                    <p class="mb-4"> {asset.description} </p>
-                                    <div class="flex flex-wrap gap-2 mb-4 w-full">
-                                        {#each asset.tags as tag}
-                                            <p class="bg-navbar-text-color text-navbar-color font-bold px-3 py-1 rounded-md text-center"> {tag} </p>
-                                        {/each}
+        {/snippet}
+        {#snippet children(suspend)}
+            {#await suspend(assets) then data}
+                {#if Object.keys(data).length > 0}
+                    <div class="flex flex-row gap-6 flex-wrap justify-center">
+                        {#each Object.entries(data) as [key, asset]}
+                            <a href={`/${lang}/catalog/package/${key}`}>
+                                <div class="bg-navbar-color w-64 rounded-3xl shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105">
+                                    <img src={`/packages/${key}/${asset.image}`} alt={asset.title} class="w-full h-40 object-cover" />
+                                    <div class="p-6 text-sm">
+                                        <p class="font-semibold text-2xl mb-2"> {asset.title} </p>
+                                        <p class="mb-4"> {asset.description} </p>
+                                        <div class="flex flex-wrap gap-2 mb-4 w-full">
+                                            {#each asset.tags as tag}
+                                                <p class="bg-navbar-text-color text-navbar-color font-bold px-3 py-1 rounded-md text-center"> {tag} </p>
+                                            {/each}
+                                        </div>
+                                        <div>
+                                            <strong>Version:</strong>
+                                            {asset.version}
+                                        </div>
+                                        <div><strong>Type:</strong> {asset.type === "plugin-page" || asset.type === "plugin-sw" ? "plugin" : asset.type}</div>
                                     </div>
-                                    <div>
-                                        <strong>Version:</strong>
-                                        {asset.version}
-                                    </div>
-                                    <div><strong>Type:</strong> {asset.type === "plugin-page" || asset.type === "plugin-sw" ? "plugin" : asset.type}</div>
                                 </div>
-                            </div>
-                        </a>
-                    {/each}
-                </div>
-            {/if}
-        {/await}
+                            </a>
+                        {/each}
+                    </div>
+                {/if}
+            {/await}
+        {/snippet}
     </Suspense>
 </div>
diff --git a/src/components/catalog/InstalledPlugins.svelte b/src/components/catalog/InstalledPlugins.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-import { Suspense } from "@svelte-drama/suspense";
+import { Suspense, createSuspense } from "@svelte-drama/suspense";
+const suspend = createSuspense();
 import { Settings, settings } from "@utils/settings/index";
 import Parent from "./Parent.svelte";
 async function getItem(item) {
@@ -27,31 +28,33 @@ async function getAssets() {
 let assets = getAssets();
 let compRef = [];
 </script>
-<Suspense let:suspend>
-  {#await suspend(assets) then data}
-    {#each Object.entries(data) as [key, asset]}
-        <Parent bind:this={compRef[key]}>
-            <div class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
-                <div class="w-full">
-                    <img src={`/packages/${asset.package_name}/${asset.image}`} alt="plugin" class="aspect-[16/9] rounded-t-3xl"/>
-                </div>
-                <div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col">
-                    <div class="text-2xl"> {asset.title} </div>
-                    <div class="flex flex-row">
-                        <div class="h-8 w-8 cursor-pointer" on:click={() => {settings.marketPlaceSettings.uninstall(asset.type === "page" ? "plugin-page" : "plugin-sw", asset.package_name); compRef[key].$destroy()}}>
-                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256" {...$$props}>
-                                <path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" />
-                            </svg>
+<Suspense>
+  {#snippet children(suspend)}
+    {#await suspend(assets) then data}
+        {#each Object.entries(data) as [key, asset]}
+            <Parent bind:this={compRef[key]}>
+                <div class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
+                    <div class="w-full">
+                        <img src={`/packages/${asset.package_name}/${asset.image}`} alt="plugin" class="aspect-[16/9] rounded-t-3xl"/>
+                    </div>
+                    <div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col">
+                        <div class="text-2xl"> {asset.title} </div>
+                        <div class="flex flex-row">
+                            <div class="h-8 w-8 cursor-pointer" on:click={() => {settings.marketPlaceSettings.uninstall(asset.type === "page" ? "plugin-page" : "plugin-sw", asset.package_name); compRef[key].$destroy()}}>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256" {...$$props}>
+                                    <path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" />
+                                </svg>
+                            </div>
+                            <a class="h-8 w-8 cursor-pointer" href={`../catalog/package/${asset.package_name}`}>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256" {...$$props}>
+                                    <path fill="currentColor" d="M192 136v72a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 1 0 16H48v128h128v-72a8 8 0 0 1 16 0m32-96a8 8 0 0 0-8-8h-64a8 8 0 0 0-5.66 13.66L172.69 72l-42.35 42.34a8 8 0 0 0 11.32 11.32L184 83.31l26.34 26.35A8 8 0 0 0 224 104Z" />
+                                </svg>
+                            </a>
                         </div>
-                        <a class="h-8 w-8 cursor-pointer" href={`../catalog/package/${asset.package_name}`}>
-                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256" {...$$props}>
-                                <path fill="currentColor" d="M192 136v72a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 1 0 16H48v128h128v-72a8 8 0 0 1 16 0m32-96a8 8 0 0 0-8-8h-64a8 8 0 0 0-5.66 13.66L172.69 72l-42.35 42.34a8 8 0 0 0 11.32 11.32L184 83.31l26.34 26.35A8 8 0 0 0 224 104Z" />
-                            </svg>
-                        </a>
                     </div>
                 </div>
-            </div>
-        </Parent>
-    {/each}
-  {/await}
+            </Parent>
+        {/each}
+    {/await}
+    {/snippet}
 </Suspense>
diff --git a/src/components/catalog/InstalledThemes.svelte b/src/components/catalog/InstalledThemes.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-import { Suspense } from "@svelte-drama/suspense";
+import { Suspense, createSuspense } from "@svelte-drama/suspense";
+const suspend = createSuspense();
 import { Settings, settings } from "@utils/settings/index";
 import Parent from "./Parent.svelte";
 async function getItem(item) {
@@ -26,39 +27,41 @@ async function getAssets() {
 let assets = getAssets();
 let compRef = [];
 </script>
-<Suspense let:suspend>
-    <div class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
-        <div class="w-full" on:click={() => {settings.marketPlaceSettings.changeTheme(true)}}>
-            <img src='/classic_theme.png' alt="Classic Nebula" class="aspect-[16/9] rounded-t-3xl"/>
-        </div>
-        <div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col text-2xl">
-            Classic Nebula
+<Suspense> 
+    {#snippet children(suspend)}
+        <div class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
+            <div class="w-full" on:click={() => {settings.marketPlaceSettings.changeTheme(true)}}>
+                <img src='/classic_theme.png' alt="Classic Nebula" class="aspect-[16/9] rounded-t-3xl"/>
+            </div>
+            <div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col text-2xl">
+                Classic Nebula
+            </div>
         </div>
-    </div>
-  {#await suspend(assets) then data}
-    {#each Object.entries(data) as [key, asset]}
-        <Parent bind:this={compRef[key]}>
-            <div class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
-                <div class="w-full" on:click={() => {settings.marketPlaceSettings.changeTheme(false, asset.payload, asset.background_video, asset.background_image, asset.package_name)}}>
-                    <img src={`/packages/${asset.package_name}/${asset.image}`} alt="theme" class="aspect-[16/9] rounded-t-3xl"/>
-                </div>
-                <div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col">
-                    <div class="text-2xl"> {asset.title} </div>
-                    <div class="flex flex-row">
-                        <div class="h-8 w-8 cursor-pointer" on:click={() => {settings.marketPlaceSettings.uninstall("theme", asset.package_name); settings.marketPlaceSettings.changeTheme(true); compRef[key].$destroy()}}>
-                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256" {...$$props}>
-                                <path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" />
-                            </svg>
+        {#await suspend(assets) then data}
+            {#each Object.entries(data) as [key, asset]}
+                <Parent bind:this={compRef[key]}>
+                    <div class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
+                        <div class="w-full" on:click={() => {settings.marketPlaceSettings.changeTheme(false, asset.payload, asset.background_video, asset.background_image, asset.package_name)}}>
+                        <img src={`/packages/${asset.package_name}/${asset.image}`} alt="theme" class="aspect-[16/9] rounded-t-3xl"/>
+                    </div>
+                    <div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col">
+                        <div class="text-2xl"> {asset.title} </div>
+                        <div class="flex flex-row">
+                            <div class="h-8 w-8 cursor-pointer" on:click={() => {settings.marketPlaceSettings.uninstall("theme", asset.package_name); settings.marketPlaceSettings.changeTheme(true); compRef[key].$destroy()}}>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256" {...$$props}>
+                                    <path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" />
+                                </svg>
+                            </div>
+                            <a class="h-8 w-8 cursor-pointer" href={`../catalog/package/${asset.package_name}`}>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256" {...$$props}>
+                                    <path fill="currentColor" d="M192 136v72a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 1 0 16H48v128h128v-72a8 8 0 0 1 16 0m32-96a8 8 0 0 0-8-8h-64a8 8 0 0 0-5.66 13.66L172.69 72l-42.35 42.34a8 8 0 0 0 11.32 11.32L184 83.31l26.34 26.35A8 8 0 0 0 224 104Z" />
+                                </svg>
+                            </a>
                         </div>
-                        <a class="h-8 w-8 cursor-pointer" href={`../catalog/package/${asset.package_name}`}>
-                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256" {...$$props}>
-                                <path fill="currentColor" d="M192 136v72a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 1 0 16H48v128h128v-72a8 8 0 0 1 16 0m32-96a8 8 0 0 0-8-8h-64a8 8 0 0 0-5.66 13.66L172.69 72l-42.35 42.34a8 8 0 0 0 11.32 11.32L184 83.31l26.34 26.35A8 8 0 0 0 224 104Z" />
-                            </svg>
-                        </a>
                     </div>
                 </div>
-            </div>
-        </Parent>
-    {/each}
-  {/await}
+            </Parent>
+        {/each}
+    {/await}
+    {/snippet}
 </Suspense>