app: frontend: Improve startup performance

[sniok]

Improves startup performance by up to 3x. Fixes #2551

Currently the biggest impact to the load performance is when it checks for existing headlamp-server process. More details here.
This PR improves this by only performing this check when server start fails with an appropriate exit code.

Also to improve startup, this PR adds loader to the index.html which is instantly visible, and adds background color to avoid flashing screen with dark themes.

To better handle the case when there's an existing headlamp-server and frontend loads early, I've used react-query for loading the cluster config for faster retries when cluster config fails to load. (Otherwise it would refetch every 10s)

Startup time comparison (measured from launching app to visible cluster list)
Before: ~4.5s
After: ~1.6s (loader visible within 0.5s)

perf-comparison.mp4

[illume]

Very cool.

Can you please confirm what testing you've done in the PR description? I'm interested to know which platforms, and which ways of running/quitting the app have been tested.

The bot added 4 reviewers, so I removed a couple and left @skoeva and @ashu8912 on as reviewers.

[Copilot]

Pull Request Overview

This PR speeds up frontend startup by deferring the headlamp-server address-in-use check until after a failed bind, adds an immediate splash loader with background-color persistence, and replaces manual polling of cluster config with react-query.

• Swap manual setInterval polling for react-query in Layout.tsx
• Embed a CSS/HTML splash loader and initialize body colors in index.html
• Emit a specific exit code on EADDRINUSE in headlamp.go and retry startup in Electron

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
frontend/src/i18n/ThemeProviderNexti18n.tsx	Remove obsolete <Loader> on i18n readiness
frontend/src/components/App/Layout.tsx	Introduce useQuery for cluster config and remove manual interval
frontend/index.html	Add splash loader markup, styles, and background-color script
backend/cmd/headlamp.go	Handle EADDRINUSE by exiting with code 98
app/electron/main.ts	Load frontend earlier, retry server start on address-in-use

Comments suppressed due to low confidence (2)

frontend/src/components/App/Layout.tsx:130

• The function references store.getState() but store is not imported, causing a compile error. Add import store from '<path_to_store>' or pass state via dispatch and selectors instead.

const fetchConfig = (dispatch: Dispatch<UnknownAction>) => {

backend/cmd/headlamp.go:1222

• You call errors.Is but haven’t imported the errors package. Add import "errors" to avoid a compile error.

if errors.Is(*err, syscall.EADDRINUSE) {

[joaquimrocha]

Haven't tested it but it looks nice. Left a comment and there are some more from Copilot.

[skoeva]

looks like a huge improvement, thanks for this!

[joaquimrocha]

Smoke tested and looks like everything is working. The new ellipsis loader that is briefly shown helps thinking the UI is not frozen.
The code also LGTM.

/approve
/lgtm

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: joaquimrocha, skoeva, sniok

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [joaquimrocha,sniok]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment