Remove templatesList from functions layout and refactor loading

Move templates loading from layout to individual pages to reduce unnecessary data loading and improve performance. Update create-function page to load templates directly instead of inheriting from parent.

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.ts

@@ -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) => {