Explore to alternative way of load data-heavy logs in the UI

[adong]

What happened: When developing https://github.com/screwdriver-cd/ui/pull/924, I faced an issue that UI views the log being generated, and if the log generated, say more than 5 MB, or say, 50MB, the browser will freeze.

Worthy to note: We don't really have issues when downloading or viewing the generated logs.

So the potential freeze maybe caused by the DOM manipulation which keeps appending the new logs to the end

What you expected to happen: Maybe some kind of mechanism to help loading data-heavy logs to prevent the browser freeze.

How to reproduce it: Go to https://cd.screwdriver.cd/pipelines/11109

[adong]

After some research, here's what I've found:

The concept is virtual scroll:

https://itnext.io/%EF%B8%8F-building-reactvirtual-scroll-in-5-min-alternative-to-pagination-and-infinite-scroll-515e0e329e76#b05f

And the available ember libraries are: Ember vertical-collection: https://github.com/html-next/vertical-collection Demo: https://html-next.github.io/vertical-collection/#/examples/infinite-scroll

Ember Infinity: https://github.com/ember-infinity/ember-infinity