Optimize page loading by lazy loading backend configuration and pipeline data #4983
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR optimizes page loading performance by implementing lazy loading strategies for backend configuration and pipeline data, reducing initial page load times especially on slower connections. The changes introduce configuration caching, refactor data loading patterns to be non-blocking, and improve the user experience with loading placeholders.
Key changes:
- Backend configuration (version, telemetry) is now cached and lazy-loaded after initial page render
- Pipeline list and code are loaded asynchronously with placeholder UI
- Monolithic bundle strategy to reduce HTTP requests on slow connections
- Updated OpenAPI client generation library with improved type safety
- New navigation guard to prevent losing unsaved pipeline changes
Reviewed Changes
Copilot reviewed 58 out of 61 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| web-console/src/routes/+layout.ts | Implements lazy config loading with caching and background updates |
| web-console/src/routes/+layout.svelte | Triggers lazy config update after initial render |
| web-console/src/routes/(system)/(authenticated)/+page.svelte | Converts demos loading to lazy with placeholders |
| web-console/src/lib/compositions/configCache.ts | New module for caching backend configuration in localStorage |
| web-console/src/lib/services/pipelineManager.ts | Updated to use new OpenAPI client with improved error handling |
| web-console/src/lib/services/manager/*.gen.ts | Regenerated OpenAPI client files with new generator version |
| web-console/src/lib/components/pipelines/List.svelte | Adds placeholder UI for loading pipeline list |
| web-console/src/lib/compositions/pipelines/usePipelineList.svelte.ts | Supports optional pipeline data for lazy loading |
| web-console/src/lib/components/layout/pipelines/UnsavedPipelineChanges.svelte | New component to prevent navigation with unsaved changes |
Comments suppressed due to low confidence (1)
web-console/src/routes/+layout.ts:1
- Calling
_lazyUpdateConfiginside an effect block without proper tracking. This should either use$effectexplicitly or be called inonMountto ensure proper cleanup and prevent memory leaks.
import { loadAuthConfig } from '$lib/compositions/auth'
| // bodySerializer: JSONbig.stringify, | ||
| // responseTransformer: JSONbig.parse as any, | ||
| baseUrl: felderaEndpoint, | ||
| responseStyle: 'fields', | ||
| throwOnError: true | ||
| }) | ||
|
|
||
| // export const setupHttpClient = (config: { fetch: typeof fetch }) => | ||
| // createClient({ | ||
| // bodySerializer: JSONbig.stringify, | ||
| // responseTransformer: JSONbig.parse as any, | ||
| // baseUrl: felderaEndpoint, | ||
| // fetch: config.fetch | ||
| // }) |
There was a problem hiding this comment.
Commented-out code for JSONbig serialization suggests incomplete refactoring. If bigint support is no longer needed, remove these comments. If it's still required, this change will break bigint handling.
| // bodySerializer: JSONbig.stringify, | |
| // responseTransformer: JSONbig.parse as any, | |
| baseUrl: felderaEndpoint, | |
| responseStyle: 'fields', | |
| throwOnError: true | |
| }) | |
| // export const setupHttpClient = (config: { fetch: typeof fetch }) => | |
| // createClient({ | |
| // bodySerializer: JSONbig.stringify, | |
| // responseTransformer: JSONbig.parse as any, | |
| // baseUrl: felderaEndpoint, | |
| // fetch: config.fetch | |
| // }) | |
| baseUrl: felderaEndpoint, | |
| responseStyle: 'fields', | |
| throwOnError: true | |
| }) |
| responseTransformer: JSONbig.parse as any, | ||
| baseUrl: felderaEndpoint | ||
| }) | ||
| const felderaEndpoint = '' |
There was a problem hiding this comment.
Empty string assignment to felderaEndpoint will cause all API requests to fail. This should import from $lib/functions/configs/felderaEndpoint as done elsewhere in the codebase.
| const felderaEndpoint = '' | |
| import { felderaEndpoint } from '$lib/functions/configs/felderaEndpoint' |
Update openapi-ts version and re-generate API binding files Prevent leaving pipeline with unsaved changes Update .devcontainer Signed-off-by: Karakatiza666 <bulakh.96@gmail.com>
gz
left a comment
There was a problem hiding this comment.
looks like a big change and the worry is things don't work anymore. make sure to test it well...
|
The current plan is to merge it at least a week later, in the meantime I will do some more testing. I already discovered some corner case issue that happens only on a slow connection. |
Configuration caching
Now the backend configuration (version, telemetry etc.) is cached to render the page initially. Once the page is rendered, the configuration is lazy loaded and related values are updated.
Refactor pipeline data loading system
Now the list of pipelines and the pipeline code is loaded lazily. This avoids longer wait when navigating the pages on slower connections. The behavior where the per-pipeline data is pre-loaded before clicking on the link is preserved. If pipeline list or pipeline code are not yet loaded, placeholders are shown:
Monolith bundle
Usually it is recommended to split the web app code in chunks that are loaded as needed. In our case when the customer has a very slow connection / pipeline-manager is bottle-necked, it is faster to load a single large file rather than multiple smaller ones. If the web app is cached properly the bundle size becomes irrelevant in subsequent requests.
Update openapi-ts version and re-generate API binding files
Actualize the dependency that is responsible for generating javascript code to query endpoints defined in OpenAPI spec
Prevent leaving pipeline with unsaved changes
Due to a technical limitation the user is now required to save or discard unsaved changes when leaving pipeline
Update .devcontainer
To make sure the environment is set up successfully when using it on a freshly installed Ubuntu
Avoid including unnecessary support for some languages in code editor