codelab
codelab copied to clipboard
Use IntersectionObservable in the code-demo component
What the issue is about:
Code examples are using monaco code editor + iframe to render things, this is very heavy. So if multiple examples are rendered on the page, it can become really slow.
The goal is to use Intersection observer in order to only display the editor and run the code if it is in the viewport.
Where to start
https://codelab.fun/angular/create-first-app/component
go to this page: http://localhost:4200/angular/create-first-app/component
And clone the code editor multiple time on this slide (The code is in this file)
Code editor is here: https://github.com/codelab-fun/codelab/tree/master/libs/code-demos/src/lib/code-demo
This functionality should probably be extracted in a separate component (or there might be an existing component in npm) which would take a template with the editor, and display it based on the viewport location.