codelab icon indicating copy to clipboard operation
codelab copied to clipboard

Use IntersectionObservable in the code-demo component

Open kirjs opened this issue 5 years ago • 0 comments

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 image

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.

kirjs avatar Sep 27 '19 19:09 kirjs