urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-19 16:51:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

VirtualScroller: repaint on loaded

Browse Source
This commit is contained in:
Liam Fitzgerald 2021-04-02 13:04:16 +10:00
parent f06dbe1ada
commit c470e73b34
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
1 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
pkg/interface/src/views/components/VirtualScroller.tsx
View File

@ -78,10 +78,14 @@ interface VirtualScrollerProps<T> {
interface VirtualScrollerState<T> { interface VirtualScrollerState<T> {
visibleItems: BigIntOrderedMap<T>; visibleItems: BigIntOrderedMap<T>;
scrollbar: number; scrollbar: number;
loaded: {
top: boolean;
bottom: boolean;
}
} }
type LogLevel = 'scroll' | 'network' | 'bail' | 'reflow'; type LogLevel = 'scroll' | 'network' | 'bail' | 'reflow';
let logLevel = ['bail', 'scroll', 'reflow'] as LogLevel[]; let logLevel = ['network', 'bail', 'scroll', 'reflow'] as LogLevel[];
const log = (level: LogLevel, message: string) => { const log = (level: LogLevel, message: string) => {
if(logLevel.includes(level)) { if(logLevel.includes(level)) {
@ -136,16 +140,15 @@ export default class VirtualScroller<T> extends Component<VirtualScrollerProps<T
private scrollRef: HTMLElement | null = null; private scrollRef: HTMLElement | null = null;
private loaded = {
top: false,
bottom: false
};
constructor(props: VirtualScrollerProps<T>) { constructor(props: VirtualScrollerProps<T>) {
super(props); super(props);
this.state = { this.state = {
visibleItems: new BigIntOrderedMap(), visibleItems: new BigIntOrderedMap(),
scrollbar: 0 scrollbar: 0,
loaded: {
top: false,
bottom: false
}
}; };
this.updateVisible = this.updateVisible.bind(this); this.updateVisible = this.updateVisible.bind(this);
@ -312,13 +315,18 @@ export default class VirtualScroller<T> extends Component<VirtualScrollerProps<T
loadRows = async (newer: boolean) => { loadRows = async (newer: boolean) => {
const dir = newer ? 'bottom' : 'top'; const dir = newer ? 'bottom' : 'top';
if(this.loaded[dir]) { if(this.state.loaded[dir]) {
return; return;
} }
log('network', `loading more at ${dir}`); log('network', `loading more at ${dir}`);
const done = await this.props.loadRows(newer); const done = await this.props.loadRows(newer);
if(done) { if(done) {
this.loaded[dir] = true; this.setState({
loaded: {
...this.state.loaded,
[dir]: done
}
});
if(newer && this.props.onBottomLoaded) { if(newer && this.props.onBottomLoaded) {
this.props.onBottomLoaded() this.props.onBottomLoaded()
} }
@ -491,7 +499,7 @@ export default class VirtualScroller<T> extends Component<VirtualScrollerProps<T
const transform = isTop ? 'scale3d(1, 1, 1)' : 'scale3d(1, -1, 1)'; const transform = isTop ? 'scale3d(1, 1, 1)' : 'scale3d(1, -1, 1)';
const atStart = (this.props.data.peekLargest()?.[0] ?? bigInt.zero).eq(visibleItems.peekLargest()?.[0] || bigInt.zero); const atStart = (this.props.data.peekLargest()?.[0] ?? bigInt.zero).eq(visibleItems.peekLargest()?.[0] || bigInt.zero);
const atEnd = this.loaded.top; const atEnd = this.state.loaded.top;
return ( return (
<> <>