search

Financial-Times / origami-registry-ui

Get information about Origami components, services, and repositories.
https://registry.origami.ft.com/
15 stars 3 forks source link

speed up demo pages by loading all the demos via iframes on the clientside #616

Closed JakeChampion closed 3 years ago

JakeChampion commented 3 years ago

currently the demo html tab is created on the server side and this can cause respones to take a long time when a component has lots of demos

moving that work to the clientside can speed up the response time for those components and we can add lazy loading on the iframes so that the user-agent only loads and iframes document when it is in view (E.G. they have clicked the html tab or scrolled down the page to view a different demo)

This solution removes the syntax highlighting and button to select all the code and copy it to the clipboard.

I thought I'd open this pull-request to see what people's thoughts are to this smaller implementation. I'm happy to make a different pull-request which fetches the html code and highlights the syntax and adds the copy to clipboard button

You can view this on the review app --> https://origami-registry-ui-dev.herokuapp.com/components/o-teaser@6.0.2

Edit: As this is the only user of the demo/html endpoint of the build-service, we could update the build service to return a page with syntax highlighting and button to copy to the clipboard etc

JakeChampion commented 3 years ago

Here is a screenshot of the html tabs for some demos screenshot of o-buttons on registry which shows the html code does not have syntax highlighting

chee commented 3 years ago

Edit: As this is the only user of the demo/html endpoint of the build-service, we could update the build service to return a page with syntax highlighting and button to copy to the clipboard etc

interesting!

JakeChampion commented 3 years ago

Comparing this branch against the production branch: This branch completes in around half a second and the production branch regularly goes above the max response time of 30 seconds

❯ time http 'https://origami-registry-ui-dev.herokuapp.com/components/o-teaser@6.0.2'
0.532 seconds total
❯ time http 'https://origami-registry-ui-eu.herokuapp.com/components/o-teaser@6.0.2'
31.263 seconds total
origamiserviceuser commented 3 years ago

:tada: This PR is included in version v219.1.3 :tada: