From 65f950db75ea6634db449cd1d153cdf50dd90545 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Wed, 28 May 2025 15:13:14 +0200 Subject: [PATCH] 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. --- .../functions/+layout.ts | 6 +----- .../project-[region]-[project]/functions/+page.ts | 6 ++---- .../functions/create-function/+page.svelte | 8 +++----- .../functions/create-function/+page.ts | 15 ++++++++++----- .../functions/templates/+page.ts | 8 +++++--- .../sites/create-site/templates/+page.svelte | 10 +++++++--- 6 files changed, 28 insertions(+), 25 deletions(-) diff --git a/src/routes/(console)/project-[region]-[project]/functions/+layout.ts b/src/routes/(console)/project-[region]-[project]/functions/+layout.ts index 2fd1a806b..4cc6fe3d9 100644 --- a/src/routes/(console)/project-[region]-[project]/functions/+layout.ts +++ b/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 }; }; diff --git a/src/routes/(console)/project-[region]-[project]/functions/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/+page.ts index a09115861..d3a6f4fb3 100644 --- a/src/routes/(console)/project-[region]-[project]/functions/+page.ts +++ b/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 }; }; diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/+page.svelte index 51a7f32bb..f032d7f2b 100644 --- a/src/routes/(console)/project-[region]-[project]/functions/create-function/+page.svelte +++ b/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 @@ - {#each featuredTemplatesList as template} + {#each featuredTemplates as template} { - 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 }; }; diff --git a/src/routes/(console)/project-[region]-[project]/functions/templates/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/templates/+page.ts index 6c252e152..c53d996f2 100644 --- a/src/routes/(console)/project-[region]-[project]/functions/templates/+page.ts +++ b/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(), new Set()] ); - const templates = templatesList.templates.filter((template) => { + templates = templates.filter((template) => { if ( filter.runtimes.length > 0 && !template.runtimes.some((n) => filter.runtimes.includes(n.name)) diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/+page.svelte index 6f9c0359c..a3fc998a2 100644 --- a/src/routes/(console)/project-[region]-[project]/sites/create-site/templates/+page.svelte +++ b/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) { @@ -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) => {