feat: Improve app startup time by e-fisher · Pull Request #1144 · grafana/k6-studio

e-fisher · 2026-04-02T12:02:42Z

Description

Remove the splash screen window and replace it with a lightweight inline loading indicator in index.html. Routes are now lazy-loaded with React.lazy, so the renderer starts faster by deferring heavy view imports.

What changed:

Removed BrowserWindow-based splash screen and all associated code (IPC handler, preload API, hook, SVG assets, HTML file)
Added a simple CSS spinner directly in index.html (supports dark mode) as the initial loading state
Lazy-loaded all route views (Home, Recorder, Generator, etc.) with a Suspense fallback spinner in the Layout
Main window now shows via ready-to-show instead of waiting for a renderer-to-main IPC round trip
Deep link replay moved from the SplashscreenClose IPC event to after loadURL resolves

Time from npm start to app ready state was cut from ~20s to ~10s on my machine.

How to Test

Run npm start and verify the app loads with a brief spinner, then shows the home view
Verify dark mode shows the correct spinner colors (launch with system dark mode)
Navigate between views and confirm lazy-loaded routes show a brief loading fallback (or load instantly on fast machines)

I've also created a custom build to verify deep links work as expected - confirmed by clicking "Start recording" from new test page in GCk6

Checklist

I have performed a self-review of my code.
I have added tests for my changes.
I have commented on my code, particularly in hard-to-understand areas.

Related PR(s)/Issue(s)

Resolves #1068

Note

Medium Risk
Medium risk because it changes Electron startup/window-show timing, IPC deep-link delivery, and route loading behavior, which could impact navigation and protocol-link handling across platforms.

Overview
Improves perceived startup performance by removing the separate BrowserWindow splash screen and replacing it with a lightweight inline spinner in index.html (with dark-mode styling).

Defers renderer work by lazy-loading the main route views via React.lazy and wrapping the routed outlet in Suspense with a delayed spinner fallback.

Simplifies startup/IPC flow by deleting splashscreen IPC APIs/assets and showing the main window on ready-to-show; deep links are now replayed after the main window finishes loading and are delivered via the new app:navigate channel with buffering in preload to avoid missing early events.

^{Reviewed by Cursor Bugbot for commit 2ff3cd8. Bugbot is set up for automated code reviews on this repo. Configure here.}

…p startup

e-fisher · 2026-04-02T12:04:58Z

+
  if (process.env.NODE_ENV === 'development') {
-    mainWindow.webContents.openDevTools({ mode: 'detach' })
+    mainWindow.webContents.openDevTools({ mode: 'right' })


This was my personal pain point - I would always close separate window and open sidebar, because it's just more comfortable for my debugging. If others prefer the detached window, I'll revert this change. Or perhaps we can make this remember personal preference.

If we don't specify the mode it will remember the last setting you used.

Suggested change

mainWindow.webContents.openDevTools({ mode: 'right' })

mainWindow.webContents.openDevTools()

Everybody wins!

That's perfect! 🤩

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

✅ Fixed: Double showWindow call on macOS dock activation
- Removed the redundant showWindow call in the activate event handler since the window is already shown by the ready-to-show event handler.

Or push these changes by commenting:

@cursor push 4d80d47564

Preview (4d80d47564)

diff --git a/src/main.ts b/src/main.ts
--- a/src/main.ts
+++ b/src/main.ts
@@ -175,8 +175,8 @@
   // On OS X it's common to re-create a window in the app when the
   // dock icon is clicked and there are no other windows open.
   if (BrowserWindow.getAllWindows().length === 0) {
-    const mainWindow = await createWindow()
-    showWindow(mainWindow)
+    await createWindow()
+    // Window is already shown by the 'ready-to-show' event handler
   }
 })

_{You can send follow-ups to this agent here.}

e-fisher · 2026-04-02T12:16:41Z

@cursor push 4d80d47

Co-authored-by: Edgar Fisher <e-fisher@users.noreply.github.com> Applied via @cursor push command

e-fisher · 2026-04-02T12:25:43Z

bugbot run

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

✅ Fixed: Duplicated delayed spinner logic across two components
- Created a new useDelayedVisibility hook that abstracts the delayed spinner logic and updated both components to use it.

Or push these changes by commenting:

@cursor push 6f580056c9

Preview (6f580056c9)

diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -2,28 +2,19 @@
 import { Box, Flex, IconButton, Spinner } from '@radix-ui/themes'
 import { Allotment } from 'allotment'
 import { PanelLeftOpenIcon } from 'lucide-react'
-import { Suspense, useEffect, useState } from 'react'
+import { Suspense, useEffect } from 'react'
 import { Outlet, useLocation } from 'react-router-dom'
 import { useLocalStorage } from 'react-use'
 
+import { useDelayedVisibility } from '@/hooks/useDelayedVisibility'
 import { useListenDeepLinks } from '@/hooks/useListenDeepLinks'
 
 import { ActivityBar } from './ActivityBar'
 import { Sidebar } from './Sidebar'
 
 function RouteLoadingFallback() {
-  const [showSpinner, setShowSpinner] = useState(false)
+  const showSpinner = useDelayedVisibility()
 
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setShowSpinner(true)
-    }, 50)
-
-    return () => {
-      clearTimeout(timeout)
-    }
-  }, [])
-
   return (
     <Flex
       align="center"

diff --git a/src/components/Layout/View.tsx b/src/components/Layout/View.tsx
--- a/src/components/Layout/View.tsx
+++ b/src/components/Layout/View.tsx
@@ -1,23 +1,14 @@
 import { css } from '@emotion/react'
 import { Flex, Spinner } from '@radix-ui/themes'
-import { PropsWithChildren, ReactNode, useEffect, useState } from 'react'
+import { PropsWithChildren, ReactNode } from 'react'
 
+import { useDelayedVisibility } from '@/hooks/useDelayedVisibility'
+
 import { ViewHeading } from './ViewHeading'
 
 function LoadingSpinner() {
-  const [showSpinner, setShowSpinner] = useState(false)
+  const showSpinner = useDelayedVisibility()
 
-  useEffect(() => {
-    // Only show the spinner if loading takes more than 50ms to avoid flickering
-    const timeout = setTimeout(() => {
-      setShowSpinner(true)
-    }, 50)
-
-    return () => {
-      clearTimeout(timeout)
-    }
-  }, [])
-
   return (
     <Flex
       css={css`

diff --git a/src/hooks/useDelayedVisibility.ts b/src/hooks/useDelayedVisibility.ts
new file mode 100644
--- /dev/null
+++ b/src/hooks/useDelayedVisibility.ts
@@ -1,0 +1,24 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * Hook that delays showing a component until a specified delay has passed.
+ * Useful for preventing flickering of loading states for quick operations.
+ * 
+ * @param delayMs The delay in milliseconds before showing the component
+ * @returns A boolean indicating whether the component should be visible
+ */
+export function useDelayedVisibility(delayMs = 50) {
+  const [isVisible, setIsVisible] = useState(false)
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setIsVisible(true)
+    }, delayMs)
+
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [delayMs])
+
+  return isVisible
+}
\ No newline at end of file

_{You can send follow-ups to this agent here.}

e-fisher · 2026-04-02T12:40:42Z

@cursor push 6f58005

…ty hook Co-authored-by: Edgar Fisher <e-fisher@users.noreply.github.com> Applied via @cursor push command

e-fisher · 2026-04-03T05:47:41Z

bugbot run

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix prepared a fix for the issue found in the latest run.

✅ Fixed: Unrelated devtools mode change bundled in feature PR
- Reverted the DevTools mode from 'right' back to 'detach' to maintain consistency with the team's established development environment.

Or push these changes by commenting:

@cursor push 0e8604b911

Preview (0e8604b911)

diff --git a/src/main.ts b/src/main.ts
--- a/src/main.ts
+++ b/src/main.ts
@@ -115,7 +115,7 @@
   replayPendingDeepLink()
 
   if (process.env.NODE_ENV === 'development') {
-    mainWindow.webContents.openDevTools({ mode: 'right' })
+    mainWindow.webContents.openDevTools({ mode: 'detach' })
   }
 
   mainWindow.on('closed', () =>

_{You can send follow-ups to this agent here.}

allansson

Really snappy startup now. ❤️

I would like to update the title of the PR to e.g. "feat: Improved startup time". I think it better captures why a user should be excited about the change.

I build a test version of the app and tested on Apple Silicon. Everything worked fine for me.

allansson · 2026-04-07T06:18:12Z

+let pendingDeepLink: string | null = null
+let deepLinkCallback: ((url: string) => void) | null = null
+
+ipcRenderer.on(AppHandler.DeepLink, (_, url: string) => {


This isn't a change request, but more like a bit of documentation.

When doing my workspace hackathon I needed to update the frontend route from the backend. Cursor chose to reuse the DeepLink handler to do so.

So this is actually more of a ChangeRoute handler. 🤔

allansson · 2026-04-07T06:24:34Z

+
  if (process.env.NODE_ENV === 'development') {
-    mainWindow.webContents.openDevTools({ mode: 'detach' })
+    mainWindow.webContents.openDevTools({ mode: 'right' })


If we don't specify the mode it will remember the last setting you used.

Suggested change

mainWindow.webContents.openDevTools({ mode: 'right' })

mainWindow.webContents.openDevTools()

Everybody wins!

allansson

LGTM!

going-confetti

Great improvement 🚢
Also closes #1068

e-fisher added 2 commits April 2, 2026 14:53

feat: Remove splashscreen, lazy load routes

3ee775c

fix: Deep link replay races with renderer listener registration on ap…

ddebec9

…p startup

e-fisher commented Apr 2, 2026

View reviewed changes

cursor bot reviewed Apr 2, 2026

View reviewed changes

Comment thread src/main.ts

Fix double showWindow call on macOS dock activation

1b3adac

Co-authored-by: Edgar Fisher <e-fisher@users.noreply.github.com> Applied via @cursor push command

e-fisher temporarily deployed to azure-trusted-signing April 2, 2026 12:17 — with GitHub Actions Inactive

cursor bot reviewed Apr 2, 2026

View reviewed changes

Comment thread src/components/Layout/Layout.tsx

Fix: Extract duplicated delayed spinner logic into useDelayedVisibili…

d321c2f

…ty hook Co-authored-by: Edgar Fisher <e-fisher@users.noreply.github.com> Applied via @cursor push command

cursor bot reviewed Apr 3, 2026

View reviewed changes

Comment thread src/main.ts Outdated

e-fisher marked this pull request as ready for review April 3, 2026 05:58

e-fisher requested a review from a team as a code owner April 3, 2026 05:58

e-fisher requested review from allansson and going-confetti April 3, 2026 05:58

allansson temporarily deployed to azure-trusted-signing April 7, 2026 06:39 — with GitHub Actions Inactive

allansson previously approved these changes Apr 7, 2026

View reviewed changes

e-fisher changed the title ~~feat: Remove splashscreen, lazy load routes~~ feat: Improve app startup time Apr 7, 2026

cr

2ff3cd8

e-fisher dismissed allansson’s stale review via 2ff3cd8 April 7, 2026 07:47

e-fisher requested a review from allansson April 7, 2026 07:50

allansson approved these changes Apr 7, 2026

View reviewed changes

going-confetti approved these changes Apr 7, 2026

View reviewed changes

e-fisher merged commit 7e122fe into main Apr 7, 2026
14 checks passed

e-fisher deleted the feat/remove-splashscreen branch April 7, 2026 10:01

k6-release-app bot mentioned this pull request Apr 7, 2026

chore(main): release 1.13.0 #1126

Draft

	mainWindow.webContents.openDevTools({ mode: 'right' })
	mainWindow.webContents.openDevTools()

Conversation

e-fisher commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How to Test

Checklist

Related PR(s)/Issue(s)

Uh oh!

e-fisher Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

allansson Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

e-fisher Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

cursor bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

e-fisher commented Apr 2, 2026

Uh oh!

e-fisher commented Apr 2, 2026

Uh oh!

cursor bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

e-fisher commented Apr 2, 2026

Uh oh!

e-fisher commented Apr 3, 2026

Uh oh!

cursor bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

allansson left a comment

Choose a reason for hiding this comment

Uh oh!

allansson Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

allansson Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

allansson left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

going-confetti left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

e-fisher commented Apr 2, 2026 •

edited

Loading

cursor bot left a comment •

edited

Loading

cursor bot left a comment •

edited

Loading

cursor bot left a comment •

edited

Loading

allansson left a comment •

edited

Loading