Remove templatesList from functions layout and refactor loading

package.json

@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://try-module.cloud/-/@appwrite/@appwrite.io/pink-svelte@7b28443",
+        "@appwrite.io/pink-svelte": "https://try-module.cloud/-/@appwrite/@appwrite.io/pink-svelte@59bddf0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",

src/routes/(console)/project-[region]-[project]/functions/+layout.ts

@@ -8,12 +8,9 @@ import type { LayoutLoad } from './$types';
 export const load: LayoutLoad = async ({ depends, params }) => {
     depends(Dependencies.FUNCTION_INSTALLATIONS);
 
-    const [runtimesList, installations, templatesList, specificationsList] = await Promise.all([
+    const [runtimesList, installations, specificationsList] = await Promise.all([
         sdk.forProject(params.region, params.project).functions.listRuntimes(),
         sdk.forProject(params.region, params.project).vcs.listInstallations([Query.limit(100)]),
-        sdk
-            .forProject(params.region, params.project)
-            .functions.listTemplates(undefined, undefined, 100),
         sdk.forProject(params.region, params.project).functions.listSpecifications()
     ]);
 
@@ -22,7 +19,6 @@ export const load: LayoutLoad = async ({ depends, params }) => {
         breadcrumbs: Breadcrumbs,
         runtimesList,
         installations,
-        templatesList,
         specificationsList
     };
 };

src/routes/(console)/project-[region]-[project]/functions/+page.ts

@@ -3,9 +3,8 @@ import { sdk } from '$lib/stores/sdk';
 import { getLimit, getPage, getSearch, pageToOffset } from '$lib/helpers/load';
 import { CARD_LIMIT, Dependencies } from '$lib/constants';
 
-export const load = async ({ url, depends, route, parent, params }) => {
+export const load = async ({ url, depends, route, params }) => {
     depends(Dependencies.FUNCTIONS);
-    const { templatesList } = await parent();
     const search = getSearch(url);
     const page = getPage(url);
     const limit = getLimit(url, route, CARD_LIMIT);
@@ -20,7 +19,6 @@ export const load = async ({ url, depends, route, parent, params }) => {
                 [Query.limit(limit), Query.offset(offset), Query.orderDesc('')],
                 search
             ),
-        search,
-        templatesList
+        search
     };
 };

src/routes/(console)/project-[region]-[project]/functions/create-function/+page.svelte

@@ -34,13 +34,11 @@
 
     let selectedRepository: string;
 
-    const featuredTemplatesList = data.templatesList.templates
+    const featuredTemplates = data.templates
         .filter((template) => template.id !== 'starter')
         .slice(0, 4);
 
-    const starterTemplate = data.templatesList.templates.find(
-        (template) => template.id === 'starter'
-    );
+    const starterTemplate = data.templates.find((template) => template.id === 'starter');
 
     const baseRuntimesList = [
         ...new Map(
@@ -166,7 +164,7 @@
                     <Divider />
 
                     <Layout.Grid columnsS={1} columns={2}>
-                        {#each featuredTemplatesList as template}
+                        {#each featuredTemplates as template}
                             <Card.Link
                                 radius="s"
                                 padding="xs"

src/routes/(console)/project-[region]-[project]/functions/create-function/+page.ts

@@ -1,12 +1,17 @@
-export const load = async ({ parent, url }) => {
-    const { templatesList, installations, runtimesList } = await parent();
+import { sdk } from '$lib/stores/sdk';
+
+export const load = async ({ parent, url, params }) => {
+    const [{ installations }, { templates }] = await Promise.all([
+        parent(),
+        sdk
+            .forProject(params.region, params.project)
+            .functions.listTemplates(undefined, undefined, 100)
+    ]);
 
     return {
-        installations,
         installation: installations.installations.find(
             (installation) => installation.$id === url.searchParams.get('installation')
         ),
-        runtimesList,
-        templatesList
+        templates: templates
     };
 };

src/routes/(console)/project-[region]-[project]/functions/templates/+page.svelte

@@ -48,13 +48,17 @@
         }
         target.searchParams.delete('page');
         offset = 0;
-        goto(target.toString());
+        goto(target.toString(), {
+            noScroll: true
+        });
     }
 
     function clearSearch() {
         const target = new URL(page.url);
         target.search = '';
-        goto(target.toString());
+        goto(target.toString(), {
+            noScroll: true
+        });
     }
 
     function getBaseRuntimes(runtimes: Models.TemplateRuntime[]): Models.TemplateRuntime[] {
@@ -141,7 +145,13 @@
             </Card>
         </Layout.Stack>
         <Layout.Stack gap="l">
-            {#if data.templates?.length > 0}
+            {#if data?.search && data.templates.length === 0}
+                <EmptySearch hidePagination search={data.search}>
+                    <Button secondary on:click={clearSearch}>Clear search</Button>
+                </EmptySearch>
+            {:else if data?.filter && data.templates.length === 0}
+                <EmptyFilter resource="templates"></EmptyFilter>
+            {:else}
                 <Paginator items={data.templates} limit={12} hidePages={false} hasLimit bind:offset>
                     {#snippet children(paginatedItems: typeof data.templates)}
                         <Layout.Grid columns={2} columnsXL={3} columnsXS={1}>
@@ -225,12 +235,6 @@
                         </Layout.Grid>
                     {/snippet}
                 </Paginator>
-            {:else if data?.search}
-                <EmptySearch hidePagination search={data.search}>
-                    <Button secondary on:click={clearSearch}>Clear search</Button>
-                </EmptySearch>
-            {:else if data?.filter}
-                <EmptyFilter resource="templates"></EmptyFilter>
             {/if}
         </Layout.Stack>
     </Layout.GridFraction>

src/routes/(console)/project-[region]-[project]/functions/templates/+page.ts

@@ -3,7 +3,7 @@ import { getSearch } from '$lib/helpers/load';
 import { sdk } from '$lib/stores/sdk';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ url, depends, parent, params }) => {
+export const load: PageLoad = async ({ url, depends, params }) => {
     depends(Dependencies.FUNCTIONS);
 
     const search = getSearch(url);
@@ -12,9 +12,11 @@ export const load: PageLoad = async ({ url, depends, parent, params }) => {
         runtimes: url.searchParams.getAll('runtime')
     };
 
-    const { templatesList } = await parent();
+    let { templates } = await sdk
+        .forProject(params.region, params.project)
+        .functions.listTemplates(undefined, undefined, 100);
 
-    const [runtimes, useCases] = templatesList.templates.reduce(
+    const [runtimes, useCases] = templates.reduce(
         ([rt, uc], next) => {
             next.runtimes.forEach((runtime) => rt.add(runtime.name));
             next.useCases.forEach((useCase) => uc.add(useCase));
@@ -23,7 +25,7 @@ export const load: PageLoad = async ({ url, depends, parent, params }) => {
         [new Set<string>(), new Set<string>()]
     );
 
-    const templates = templatesList.templates.filter((template) => {
+    templates = templates.filter((template) => {
         if (
             filter.runtimes.length > 0 &&
             !template.runtimes.some((n) => filter.runtimes.includes(n.name))

src/routes/(console)/project-[region]-[project]/sites/create-site/templates/+page.svelte

@@ -34,7 +34,9 @@
         }
         target.searchParams.delete('page');
         offset = 0;
-        goto(target.toString());
+        goto(target.toString(), {
+            noScroll: true
+        });
     }
 
     let searchText = page.url.searchParams.get('search') ?? '';
@@ -52,7 +54,7 @@
         url.searchParams.delete('page');
         offset = 0;
 
-        goto(url.toString(), { keepFocus: true });
+        goto(url.toString(), { keepFocus: true, noScroll: true });
     }, 250);
 
     function applySearch(event: CustomEvent<string>) {
@@ -64,7 +66,9 @@
         searchText = '';
         const target = new URL(page.url);
         target.search = '';
-        goto(target.toString());
+        goto(target.toString(), {
+            noScroll: true
+        });
     }
 
     const isChecked = (useCase: string) => {