In multi-view mode, when a new view is added, Flutter canvas is temporarily blank for a frame (or more). This is visually jarring, and requires workarounds to achieve the best user experience.

Repro: https://github.com/ditman/flutter-experimental/tree/main/flutterconf_latam_demo
Live demo: https://flutterconf-latam-2024-fw-demo.web.app/

There's nothing in WebGL itself that requires skipped frames. The canvas can be added and rendered in the same frame. Here's a demo JSFiddle: https://jsfiddle.net/yjbanov/t0zkm8nw/

Possible cause

One source of the skipped frames might be the implementation of scheduleWarmUpFrame:

It requires two timers to render a frame. While a timer does not guarantee a frame will be missed, the likelihood is high that it will. There may be more sources of skipped frames in the framework, but I haven't checked.

Motivation

Multi-view lowers the bar for embedding Flutter into existing applications. In terms of seamless integration we're quite close to how people would embed PixieJS, ThreeJS, and even classic DOM framework content inside other frameworks (e.g. React inside Vue).

However, when appending a DOM element inside another DOM element you never see the UI in temporarily inconsistent state. The new DOM element is laid out and fitted within the host DOM tree immediately, and the user observes the app going from one consistent state to the next consistent state.

We should aim for the same level of experience with multi-view. Adding a view should feel like adding a DOM element. However, this extra blank frame adds a little quality quirk.