search

fonsp / Pluto.jl

🎈 Simple reactive notebooks for Julia
https://plutojl.org/
MIT License
4.91k stars 284 forks source link

◐ Spin Pkg terminal spinners with CSS for performance #2787

Closed fonsp closed 5 months ago

fonsp commented 5 months ago

2500 introduced two performance issues:

  1. High network pressure and latency #2739
  2. The terminal outputs are stored in the state, and are included in every codemirror as a compartment value (because the terminal text is displayed in the Pkg popup). This was causing lots of expensive re-renders. According the the profile, most time was spent in the CM6 compartment/extension state management.

The solution in this PR is to replace all 4 progress characters with ◐ on the server side (before diffing). This fixes both issues because the updates are now much less frequent.

To still get a spinning animation, we search for the ◐ character, give it a class and make it spin with a CSS animation. The result is almost identical!

Before

https://github.com/fonsp/Pluto.jl/assets/6933510/55d2052b-fd74-455d-be66-47065a714130

Scherm­afbeelding 2024-01-22 om 11 07 29

After

https://github.com/fonsp/Pluto.jl/assets/6933510/c8ab4466-4c95-46f1-a5d2-3c9c769b9f3e

Scherm­afbeelding 2024-01-22 om 11 04 15
You can see that there are much fewer messages from the server: https://github.com/fonsp/Pluto.jl/assets/6933510/05df3724-833c-46c1-b4d5-0ed3038dd6dc

fix #2739

github-actions[bot] commented 5 months ago

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="pkg-terminal-spinners-with-css")
  julia> using Pluto
fonsp commented 5 months ago

I'm really proud of this PR 😙