Open yangguansen opened 1 year ago
Hi @yangguansen, you could refer to the demo here https://www.patternfly.org/extensions/log-viewer/react-demos. Besides, could you provide more detail on this issue like how you use the log viewer or create a code sandbox for it to reproduce the issue? Thank!
Hi @DaoDaoNoCode Thanks for answer, my use case is :
I know i need unshift older data to log data array, but how to keep page natural scroll and not let user found loading progress, means after requested data, the page text should keep it position, not be effected by new data?
@yangguansen Hi, my suggestion here is to load as many logs as possible when the user opens the log viewer. The log viewer uses virtualization (which means calculating the position of all the logs and dynamically rendering them when scrolling) and can handle very large logs. In other words, it's designed to show huge amounts of logs. As a trade-off of the performance, it could be tricky sometimes, like in the use case you mentioned above. So my advice is to make an API call to get as many logs as possible and set them at one time. In this way, you can also reduce the network call times. Let me know if you have any questions!
Hi @DaoDaoNoCode Currently we first load will request 5000 items, it's pretty large size for browser, and 5000 is our most large count, so if we have 10000 items in database, we will split them, for example, user scroll up, we need request 100 items every time, this is common resolution, so we try to unshift data to log data array, but it cannot keep same page position after every request.
Hi @yangguansen
Could you try to set the scrollToRow
props based on the amount of old logs you are requesting? For example, if the user scrolls up and requests 100 items, you could render the whole 5100 items together and set scrollToRow={101}
, which will auto scroll to index 101 (which is the start of the original logs before the user requests more). I think in this way it could basically keep the current position, not 100% precise though.
Thanks for this suggestion, i had tried with this, scrollToRow
had a "page text jump", it's not perfect.
what i was trying is record page offsetTop
and scroll to previous offsetTop
Is this a new component or an extension of an existing one? What is the existing component, if any? Logviewer
Describe the feature A clear and concise description of the new feature. What is the expected behavior?
Expect: New requested data can stay original data position.
Are there visuals for this feature? If applicable, please include examples for each state and for varying widths Include screenshots or links to Marvel or other mockups.
Any other information?