detachable views have white screen before "First Contentful Paint (FCP)"

[nimo23]

Feature Description:

When we detach a view (e.g. the "Source Editor" view), then a white screen is shown for a very short moment (about 1-2 seconds) ("First Contentful Paint (FCP)"), which is also a bit annoying when dark mode is active. It would be nice if the detached view had at least the same background color as the original view when loading the content (e.g. by using "React.useLayoutEffect" while rendering the detached view or some other possible optimizations).

[JonasHelming]

@tsmaeder @sdirix

[tsmaeder]

We are using the javascript window.open() call to create secondary windows. As such, we have little direct control over the window lifecyle, in particular we can't wait to show the window until the content is ready like when creating windows from electron. Determining the background color in the window itself is a non-starter, since we need to load a lot of javascript to find out what that is. We'd have to communicate the background color via some side channel (maybe a parameter on the window url?)

[nimo23]

maybe a parameter on the window url

That sounds good. For example:

// Set the query parameter to the URL 
// using the current background color of the window to be detached
..

// Get the query parameter from the URL
const urlParams = new URLSearchParams(window.location.search);
const bgColor = urlParams.get('bgColor');

// Open a new window
const newWindow = window.open('', '_blank');

// Set the background color of the new window
if (bgColor) {
  newWindow.document.body.style.backgroundColor = bgColor;
}

Another approach would be to preload the content before inserting it into the detached window, but I think the URL approach is better.

One thing to consider is that if you change the theme (e.g. from dark to light) while detached windows are open, the detached windows should also inherit those styles (e.g. background color).