Browser extension: Zero Loading Time

[adamziel]

Let's make the browser extension load Playground instantly, without any perceivable loading.

CleanShot.2024-06-02.at.00.54.36.mp4

We could preload it on every page, but booting Playground in 15 browser tabs would slow down the browser.

The way forward here would be to:

• Boot Playground locally
• Go the the new post page editor
• Cache the loaded HTML response and all the API fetch responses
• Build a single bundle with all WordPress static assets and that cached data
• Ship that with the extension (or on Playground.wordpress.net)
• Preload that static HTML+JS on every GitHub page
• Initialize the rest of Playground only after the user opens the editor for the first time, maybe they've started typing at that point
• Brownie points if we can... not initialize Playground at that point and just stay with the pre-rendered editor

cc @ellatrix @youknowriad – how easy would that be? Could we "just boot" the Gutenberg framework or fork the standalone Blocknotes editor?

[bgrgicak]

@adamziel would this still be needed if Playground had offline support?

With offline support the first load would take longer, but future loads should be quick because all files will be cached.

[adamziel]

@bgrgicak I’m not sure — maybe it won’t! Let’s decide once we know how snappy the offline-enabled version is. We could also get fancy and, say, boot invisible Playground in the last three active tabs or so while reaping the rest.

[ellatrix]

how easy would that be? Could we "just boot" the Gutenberg framework or fork the standalone Blocknotes editor?

I'm not sure I'm following. You're talking about a Playground Extension right? Or a standalone GB one?

[adamziel]

I'm not sure I'm following. You're talking about a Playground Extension right? Or a standalone GB one?

I was thinking about a standalone Gutenberg

[ellatrix]

Yes, honestly that makes more sense for something simple like editing with the block editor in the browser

[adamziel]

Right — do you have an isolated example of that?