-
-
Notifications
You must be signed in to change notification settings - Fork 19
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add blank rows while fetching new items #65
Comments
I see, you want some stub rows to be inserted into the view before the Datasource.get call. This feature definitely could be implemented, and I've already thought about it. There are some difficulties with uncertain heights case... So putting the "enhancement" label for now. |
@dhilt Hi! Is there any progress on the encanchement above or any thoughts on adding it to the future versions? We have a large dataset in the app and it's also annoying to see the blank rows and lags while scrolling the data back and forth |
@avmaxim Unfortunately I had no time for this... One thing just came to my mind, you may try the following workaround: div[data-padding-backward], div[data-padding-forward] {
background-image: url("scr-row.png");
background-repeat: repeat-y;
} Here |
@dhilt Thanks! It partly works. BUT with this approach at least a few critical downsides that lead to additional problems seem to loom:
Please advice how we can alliviate these bottlenecks. Thank you! |
@avmaxim Well, I believe this is not a good game, but the 1 problem could be solved via manipulating styles in runtime. The approach can be improved and adapted to the application/view needs, but the POC is as follows: const sub = combineLatest([
this.datasource.adapter.eof$,
this.datasource.adapter.isLoading$
]).subscribe(([eof, loading]) => {
// waiting for stop in the end-of-file
if (eof && !loading) {
// check if there is an empty space in the visible part of the viewport
const viewportEl = document.querySelector('.viewport') as HTMLElement;
if (viewportEl.scrollHeight <= viewportEl.clientHeight) { // ===
// remove background-image
const fwdPaddingElt = document.querySelector('[data-padding-forward]') as HTMLElement;
fwdPaddingElt.style.backgroundImage = 'none';
}
sub.unsubscribe();
}
}); Instead, you may not to have styles on start, and apply background-image only when scrollHeight > clientHeight. ResizeObserver may help. The 2 problem requires core changes... Btw, do you experience lags because of data flow latency, or is it just a matter of rendering? By data flow latency, I mean the latency at the But if the lags being discussed have render-only nature (no delay in |
Would it be possible to add blank rows of expected quantity (before dispatching the request) instead of increasing the gap in top or bottom part of the list when scrolling?
It's really annoying to see the blank space while waiting for the data to be loaded, if the above was possible, we could show blank rows (with a spinner for example) and once the data are loaded we can then populate the pre-generated rows with the loaded data.
What do you think?
The text was updated successfully, but these errors were encountered: