Faster page load: delay rendering codemirror until in view

[fonsp]

Render the code as plaintext (with some fake codemirror classes) until the input is scrolled into view, instead of creating the codemirror on page load.

This makes the page load faster (LCP from 720ms to 560ms) and the page becomes interactive faster (busy CPU time from 2070ms to 1020ms).

The number of elements in the page goes down (from 8409 to 5206, or 4506 when also skipping folded cells).

This also makes SSR easier if we ever want to do that in the future.

Before

After

TODO

• [x] detect print
• [ ] skip optimization for the first 5 cells
• [ ] start loading in background when idle
• [x] Cross-navigating cells with arrow keys should still work
• [x] Investigate skipping render for folded cells
• [x] frontend tests

[github-actions[bot]]

Try this Pull Request!

Open Julia and type:

  julia> import Pkg
  julia> Pkg.activate(temp=true)
  julia> Pkg.add(url="https://github.com/fonsp/Pluto.jl", rev="delay-cm-until-scrolled-into-view")
  julia> using Pluto