[bug] Blank white screen on load

[justintaylor-dev]

Describe the bug

Small question / possible bug report, There's a blank white screen on load in dev and after build / install. I'm guessing this is just the Webview taking 600-800ms to load up, but if so, is there a way to either set the background color or hide the window until it's fully loaded so we don't get the blank white screen?

Tauri is insanely awesome, keep up the great work! 👏

Reproduction

Build app
Launch App

Expected behavior

No response

Platform and versions

Environment
› OS: Windows 10.0.19043 X64
› Webview2: 105.0.1343.27
› MSVC:
- Visual Studio Community 2019
› Node.js: 16.13.2
› npm: 8.1.2
› pnpm: Not installed!
› yarn: 1.22.5
› rustup: 1.24.3
› rustc: 1.61.0
› cargo: 1.61.0
› Rust toolchain: stable-x86_64-pc-windows-msvc

Packages
› @tauri-apps/cli [NPM]: 1.0.5
› @tauri-apps/api [NPM]: 1.0.2
› tauri [RUST]: 1.0.5,
› tauri-build [RUST]: 1.0.4,
› tao [RUST]: 0.12.2,
› wry [RUST]: 0.19.0,

App
› build-type: bundle
› CSP: unset
› distDir: ../dist
› devPath: http://localhost:1420/
› framework: React

App directory structure
├─ .vscode
├─ dist
├─ node_modules
├─ public
├─ src
└─ src-tauri

Stack trace

No response

Additional context

No response

[FabianLars]

WebView2 indeed has a known bug which causes the initial load to be a little slow and flashing a white window, not sure if changing the background color made that go away completely.

Anyway, background color support was just merged in wry so that will still take a while until it's available in Tauri.

You can hide the window by setting "visible": false in your tauri.conf window config (if that's how you spawn the window) and then call appWindow.show() in your js code once it's loaded.

[GiantappMan]

Hi @FabianLars

I want to create a window in the rs file without tauri.conf
How should I deal with it?

  let main_window =
            tauri::WindowBuilder::new(handle, "main", tauri::WindowUrl::App(url.into()))
                .visible(false)
                .build()
                .expect("failed to create main window");
        main_window.set_title("title").unwrap();    
        main_window.center().unwrap();
        main_window.show().unwrap();

[GiantappMan]

Hi @FabianLars

I want to create a window in the rs file without tauri.conf How should I deal with it?

  let main_window =
            tauri::WindowBuilder::new(handle, "main", tauri::WindowUrl::App(url.into()))
                .visible(false)
                .build()
                .expect("failed to create main window");
        main_window.set_title("title").unwrap();    
        main_window.center().unwrap();
        main_window.show().unwrap();

For anyone having a similar problem:

rust :

  let main_window =
            tauri::WindowBuilder::new(handle, "main", tauri::WindowUrl::App(url.into()))
                .visible(false)
                .build()
                .expect("failed to create main window");
        main_window.set_title("title").unwrap();
        main_window.center().unwrap();

frontend:

  async function setupAppWindow() {
    const appWindow = (await import('@tauri-apps/api/window')).appWindow
    appWindow.show();
  }

  useEffect(() => {
    setupAppWindow()
  }, [])

tauri.conf.json:

    "allowlist": {   
      "window": {
        "show": true
      }
    },

[badalya1]

You can hide the window by setting "visible": false in your tauri.conf window config (if that's how you spawn the window) and then call appWindow.show() in your js code once it's loaded.

appWindow.show() still will produce the same outcome. I don't think there is a programmatic way to show the window and make everything smooth.

Where is this known bug being tracker? is there a link?

[Borber]

You can hide the window by setting in your tauri.conf window config (if that's how you spawn the window) and then call in your js code once it's loaded."visible": false``appWindow.show()

appWindow.show() still will produce the same outcome. I don't think there is a programmatic way to show the window and make everything smooth.

Where is this known bug being tracker? is there a link?

You may need to wait a while before appWindow.show() , I'm also curious why this bug hasn't been fixed after so long, no matter whose problem it is

onMount(async () => {
    setTimeout(() => {
      setupWindow();
    }, 300);
  });

  async function setupWindow() {
    const appWindow = (await import('@tauri-apps/api/window')).appWindow
    appWindow.show();
  }

[Alaricus]

Seeing this over a year later. I tried bypassing it by using a splash screen, but that one turned out to have the same exact problem, although the time until render is shorter (either because the window is smaller or because the html page has no JS and is lighter.)

[nikolaeu]

slight delay works fine in my case, though may need more comprehensive testing on other devices

window.addEventListener("load", (event) => {
	setTimeout(() => {
		appWindow.show();
	}, 100);
});

@FabianLars I see it marked as completed without PR/commint reference. Maybe we should reopen, as the initial experience looks quite annoying with such flickering.

[Borber]

slight delay works fine in my case, though may need more comprehensive testing on other devices

window.addEventListener("load", (event) => {
	setTimeout(() => {
		appWindow.show();
	}, 100);
});

@FabianLars I see it marked as completed without PR/commint reference. Maybe we should reopen, as the initial experience looks quite annoying with such flickering.

#5170 (comment) It's because this bug can only be fixed by WebView2 itself and provides a solution.

[rcsaquino]

If I recall correctly wails, (Tauri but for Go), use webview2 as well but it doesn't seem have this issue.