Lazy rendering

[MaxiLein]

Summary

• Added Callback to Scrollbar that's invoked at specified scroll-position
• Added Hook for lazy rendering
• Added useIntervall lock for custom debounce

Details

Scrollbar:

import ScrollBar from '@/components/scrollbar';

// ...

/* Parent that specifies the size of the scrollable element */
<div style={{height: '200px', width: '200px'}}
    <ScrollBar
        width={'10px'} /* Width of the scrollbar */
        reachedEndCallBack={() => {console.log('Reached the threshold')}} /* Function that should be invoked if the scroll reaches the specified threshold; optional */
        threshold={0.5} /* After what % of scroll the callback should be invoked (0.5 = 50%); defaults to 0.8 */
        maxCallInterval={2_000} /* Time in ms that should be at least between invoking the callback; defaults to 500  */
    >
        {largeArray.map((item, i, arr) => (
            <SomeOtherComponent key={i}/>
        ))}
    </ScrollBar>
</div>

Lazy rendering:

import { useLazyLoading } from '@/components/scrollbar';

// ...
const watchThisElementRef = useRef<HTMLDivElement | null>(null);
 /* The next Scrollbar ancestor will be used as the viewport or, if there is none, the viewport of the client */
const shouldBeRendered= useLazyLoading(
        watchThisElementRef  /* what element to check for visibility */, 
        '100%' /* top and bottom margin of viewport in px or %, defaults to 50% */,
        false /* whether the returned value should remain true once it has been set to true, defaults to true */
    );

// ...

{ shouldBeRendered && <SomeExpensiveComponent/> }

Intervall Lock:

import { useIntervalLock } from '@/lib/useIntervalLock';

// ...
const foo = () => { console.log('FOO') }
const lockedFoo = useIntervalLock(foo, 5_000)
while (true) {
    lockedFoo() /* Will only invoke 'foo' every 5 sec */
}

[MaxiLein]

Added after meeting

[MaxiLein]

Added after meeting