Lazy-load the JupyterLite embedded page in documentation

[HaudinFlorence]

Remove the retrolite directive in the documentation, since there are already the links and the buttons to click and make an online try.

[jasongrout]

Why would you like to remove the embedded example? For example, is it to simplify the page visually? To make it easier to download? Something else?

I think there is a far higher engagement if we embed an example directly in the page, rather than making people click a link. I'm not sure how we'd be able to track that, but I think it's worth embedding an example and providing a link to many more examples. Thoughts?

[HaudinFlorence]

Thanks for your reply. The main purpose of proposing this change was to make the download easier when a user only wants to have a look at the doc. Also to simplify the page visually (here the index is pushed at the bottom of the page and not really visible anymore). Perhaps we can think about embedding examples at another place and redistribute things differently?

[martinRenou]

Thanks! I just have a minor suggestion :)

[martinRenou]

Thank you!

[jasongrout]

The main purpose of proposing this change was to make the download easier when a user only wants to have a look at the doc.

My main purpose in reintroducing the example on the front page is to make it much more likely that a user will interact with it. The thought is that every click you require a user to take really cuts down on engagement, and if you make it so easy to try things, the user actually will. The correlated thought is that it is really hard for a user to wrap their mind around how powerful ipyleaflet is and how to use it, but a simple concrete and interactive example really helps the user understand what ipyleaflet is all about.

I would be very interested in data that could validate that assumption, i.e., how many users will run code in an embedded retrolite, vs how many users will click through to a separate page. My guess is that far more users will run code in an embedded retrolite than will click through to a separate page to run code. However, I think other reasons prevent us from collecting such data.

For me, the page loads, including the animated gif, and then later the retrolite iframe loads, i.e., I can quickly see all the static info on the page, navigate however I want, etc., before the retrolite loads, so (for me) the immediate quick look at the docs doesn't suffer from having the example on the page. How does it behave for you?

Also to simplify the page visually (here the index is pushed at the bottom of the page and not really visible anymore).

What do you think of putting the embedded retrolite behind an HTML details element, so that it doesn't take up the vertical space, but still is immediately available to users? I think that takes care of the visual point you mention. Something like:

Try ipyleaflet now

[The embedded retrolite iframe]

Or what about just moving the index above the interactive example?

[jasongrout]

It looks like the HTML details element has an event for when it is opened, so we could just have a details element that, the first time it is opened, creates the necessary iframe, so we have true lazy loading.

[jasongrout]

Thanks for introducing the prompt option in this PR. I didn't know about that option, which does seem to solve at least one of the concerns about a heavy page. Awesome!

[HaudinFlorence]

Thanks for introducing the prompt option in this PR. I didn't know about that option, which does seem to solve at least one of the concerns about a heavy page. Awesome!

This was a suggestion of @martinRenou.