@pinnacle0/web-ui 0.3.35 → 0.3.36

package/src/core/FlatList/VirtualFlatList/index.tsx

@@ -0,0 +1,142 @@
+import React from "react";
+import {defaultRangeExtractor, useVirtual} from "react-virtual";
+import {classNames} from "../../../util/ClassNames";
+import {useLoadingWithDelay} from "../shared/hooks/useLoadingWithDelay";
+import {Wrapper} from "../shared/Wrapper";
+import {Footer} from "../shared/Footer";
+import {GetRowKey} from "../shared/GetRowKey";
+import {Item} from "./Item";
+import type {VirtualFlatListProps} from "./type";
+import type {Range} from "react-virtual";
+import type {FooterData, LoadingType} from "../type";
+import "./index.less";
+
+/**
+ * VirtualizedFlatList currently only work with item without and size related animation and transition since it break the layout. This will be improve in the future
+ */
+export const VirtualFlatList = function <T>(props: VirtualFlatListProps<T>) {
+    const {
+        data,
+        renderItem,
+        rowKey,
+        loading,
+        bounceEffect = true,
+        className,
+        style,
+        onPullDownRefresh,
+        onPullUpLoading,
+        emptyPlaceholder,
+        contentStyle,
+        gap,
+        autoLoad = true,
+        overscan = 3,
+        hideFooter,
+        estimateSize,
+        listRef,
+        pullUpLoadingMessage,
+        endOfListMessage,
+        pullDownRefreshMessage,
+    } = props;
+
+    const listWrapperRef = React.useRef<HTMLDivElement>(null);
+    const [loadingType, setLoadingType] = React.useState<LoadingType>(null);
+    const currentRangeRef = React.useRef<Range>();
+    const previousRangeRef = React.useRef<Range>();
+
+    const loadingWithDelay = useLoadingWithDelay(loading ?? false, 300);
+
+    const listData: Array<T | FooterData> = React.useMemo(() => {
+        return hideFooter
+            ? data
+            : [
+                  ...data,
+                  {
+                      loading: loadingWithDelay && loadingType === "loading",
+                      ended: !onPullUpLoading,
+                      endMessage: endOfListMessage,
+                      loadingMessage: pullUpLoadingMessage,
+                      __markedAsFooterData: true,
+                  } as FooterData,
+              ];
+    }, [loadingWithDelay, loadingType, endOfListMessage, onPullUpLoading, pullUpLoadingMessage, data, hideFooter]);
+
+    const rangeExtractor = React.useCallback((range: Range) => {
+        previousRangeRef.current = currentRangeRef.current ?? range;
+        currentRangeRef.current = range;
+        return defaultRangeExtractor(range);
+    }, []);
+
+    const rowVirtualizer = useVirtual({
+        size: listData.length,
+        parentRef: listWrapperRef,
+        overscan,
+        estimateSize,
+        rangeExtractor,
+    });
+    const rowVirtualizerRef = React.useRef(rowVirtualizer);
+    rowVirtualizerRef.current = rowVirtualizer;
+
+    React.useImperativeHandle(listRef, () => ({
+        measure: rowVirtualizer.measure,
+    }));
+
+    React.useEffect(() => {
+        if ((loading === undefined || loading === null) && (onPullDownRefresh || onPullUpLoading)) {
+            throw new Error("Loading must be specify when given either onPullDownRefresh or onPullUpLoading");
+        }
+    }, [onPullDownRefresh, onPullUpLoading, loading]);
+
+    // the reason why onScroll event is used to simulate auto loading instead of rangeExtractor is rangeExtractor return a wrong range when on mount
+    const onAutoLoad = () => {
+        const previousRange = previousRangeRef.current;
+        const currentRange = currentRangeRef.current;
+        if (
+            previousRange &&
+            currentRange &&
+            autoLoad &&
+            onPullUpLoading &&
+            !loadingWithDelay &&
+            // check going downward
+            previousRange.end < currentRange.end &&
+            currentRange.end > data.length - 2 - (typeof autoLoad === "number" ? autoLoad : 3)
+        ) {
+            setLoadingType("loading");
+            onPullUpLoading();
+        }
+    };
+
+    // TODO/Alvis loading more when item can not fill the whole viewport
+
+    return (
+        <Wrapper
+            className={classNames("g-virtual-flat-list", className)}
+            bounceEffect={bounceEffect}
+            listWrapperRef={listWrapperRef}
+            loadingType={loadingType}
+            onLoadingTypeChange={setLoadingType}
+            loading={loadingWithDelay}
+            onPullDownRefresh={onPullDownRefresh}
+            onPullUpLoading={onPullUpLoading}
+            innerStyle={contentStyle}
+            style={style}
+            pullDownRefreshMessage={pullDownRefreshMessage}
+            onScroll={onAutoLoad}
+        >
+            {data.length === 0 && !loadingWithDelay ? (
+                emptyPlaceholder
+            ) : (
+                <div className="list" style={{height: rowVirtualizer.totalSize}}>
+                    {rowVirtualizer.virtualItems.map(virtualItem => {
+                        const data = listData[virtualItem.index];
+                        if (listData[virtualItem.index]?.["__markedAsFooterData"] === true) {
+                            const {loading, loadingMessage, endMessage, ended} = data as FooterData;
+                            return <Footer key={virtualItem.index} loading={loading} ended={ended} loadingMessage={loadingMessage} endMessage={endMessage} measure={virtualItem.measureRef} />;
+                        } else {
+                            return <Item key={GetRowKey(rowKey, data as T, virtualItem.index)} virtualItem={virtualItem} data={data as T} gap={gap} renderItem={renderItem} />;
+                        }
+                    })}
+                </div>
+            )}
+        </Wrapper>
+    );
+};

package/src/core/FlatList/VirtualFlatList/type.ts

@@ -0,0 +1,26 @@
+import type React from "react";
+import type {FlatListItemProps, FlatListProps} from "../type";
+
+// FlatList related type
+export type Measure = (node: HTMLElement | null) => void;
+
+export interface VirtualFlatListHandle {
+    measure: () => void;
+}
+
+export interface VirtualFlatListProps<T> extends Omit<FlatListProps<T>, "renderItem" | "autoLoad"> {
+    renderItem: ItemRenderer<T>;
+    /** Automatic load new data when scroll to bottom, a number {X} mean: when to scroll to last {X} items, auto load is going to be triggered */
+    autoLoad?: boolean | number;
+    /** Must wrap with React.useCallback */
+    estimateSize?: (index: number) => number;
+    /** The amount of items to load both behind and ahead of the current window range, default = 3 */
+    overscan?: number;
+    listRef?: React.RefObject<VirtualFlatListHandle>;
+}
+
+export interface VirtualFlatListItemProps<T> extends FlatListItemProps<T> {
+    measure: Measure;
+}
+
+export type ItemRenderer<T> = React.FunctionComponent<VirtualFlatListItemProps<T>>;

package/src/core/FlatList/index.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import {Wrapper} from "./shared/Wrapper";
+import type {FlatListProps, LoadingType} from "./type";
+import {Footer} from "./shared/Footer";
+import {useLoadingWithDelay} from "./shared/hooks/useLoadingWithDelay";
+import {classNames} from "../../util/ClassNames";
+import {GetRowKey} from "./shared/GetRowKey";
+
+export const FlatList = function <T>(props: FlatListProps<T>) {
+    const {
+        data,
+        renderItem: ItemRenderer,
+        rowKey,
+        loading,
+        bounceEffect = true,
+        className,
+        style,
+        gap,
+        onPullDownRefresh,
+        onPullUpLoading,
+        contentStyle,
+        emptyPlaceholder,
+        pullDownRefreshingMessage,
+        pullUpLoadMoreMessage,
+        pullDownRefreshMessage,
+        pullUpLoadingMessage,
+        endOfListMessage,
+        hideFooter,
+    } = props;
+
+    const listWrapperRef = React.useRef<HTMLDivElement>(null);
+    const [loadingType, setLoadingType] = React.useState<LoadingType>(null);
+    const loadingWithDelay = useLoadingWithDelay(loading ?? false, 250);
+
+    React.useEffect(() => {
+        if ((loading === undefined || loading === null) && (onPullDownRefresh || onPullUpLoading)) {
+            throw new Error("Loading must be specify when given either onPullDownRefresh or onPullUpLoading");
+        }
+    }, [onPullDownRefresh, onPullUpLoading, loading]);
+
+    // Automatically loading new data when scroll near the bottom
+    const onScroll = (e: React.UIEvent) => {
+        if (!loadingWithDelay && onPullUpLoading) {
+            const {scrollHeight, scrollTop, clientHeight} = e.currentTarget;
+            if (scrollHeight * 0.8 < clientHeight + scrollTop) {
+                setLoadingType("loading");
+                onPullUpLoading?.();
+            }
+        }
+    };
+
+    const margin = React.useMemo(
+        (): React.CSSProperties => (gap ? (typeof gap === "number" ? {margin: gap} : {marginLeft: gap.left, marginRight: gap.right, marginBottom: gap.bottom, marginTop: gap.top}) : {}),
+        [gap]
+    );
+
+    return (
+        <Wrapper
+            className={classNames("g-flat-list", className)}
+            listWrapperRef={listWrapperRef}
+            bounceEffect={bounceEffect}
+            innerStyle={contentStyle}
+            loadingType={loadingType}
+            onLoadingTypeChange={setLoadingType}
+            loading={loadingWithDelay}
+            style={style}
+            onPullDownRefresh={onPullDownRefresh}
+            onPullUpLoading={onPullUpLoading}
+            pullDownRefreshMessage={pullDownRefreshMessage}
+            pullDownRefreshingMessage={pullDownRefreshingMessage}
+            onScroll={onScroll}
+        >
+            {data.length === 0 ? (
+                emptyPlaceholder
+            ) : (
+                <div className="list">
+                    {data.map((d, i) => (
+                        <div className="g-flat-list-item" key={GetRowKey(rowKey, d, i)} style={{...margin}}>
+                            <ItemRenderer data={d} index={i} />
+                        </div>
+                    ))}
+                    {!hideFooter && (
+                        <Footer
+                            loading={loadingWithDelay && loadingType === "loading"}
+                            ended={!onPullUpLoading}
+                            loadMoreMessage={pullUpLoadMoreMessage}
+                            loadingMessage={pullUpLoadingMessage}
+                            endMessage={endOfListMessage}
+                        />
+                    )}
+                </div>
+            )}
+        </Wrapper>
+    );
+};

package/src/core/FlatList/shared/Footer/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import type {Measure} from "../../VirtualFlatList/type";
+import type {FooterData} from "../../type";
+import {Spinner} from "../Spinner";
+import "./index.less";
+
+export interface Props extends Omit<FooterData, "__markedAsFooterData"> {
+    measure?: Measure;
+}
+
+export const Footer = (props: Props) => {
+    const {loading, ended, loadMoreMessage, loadingMessage, endMessage, measure} = props;
+    const measureRef = React.useRef(measure);
+    measureRef.current = measure;
+
+    return (
+        <div className="g-flat-list-footer" ref={measure}>
+            {loading && (typeof loadingMessage !== "object" ? <Spinner loading message={loadingMessage ?? "loading..."} /> : loadingMessage)}
+            {ended && !loading && (endMessage ?? "All data loaded")}
+            {!ended && !loading && (loadMoreMessage ?? "Pull up to loading more")}
+        </div>
+    );
+};

package/src/core/FlatList/shared/GetRowKey.ts

@@ -0,0 +1,11 @@
+import type {RowKey} from "../type";
+
+export function GetRowKey<T>(rowKey: RowKey<T>, data: T, index: number): string | number {
+    if (rowKey === "index") {
+        return index;
+    } else if (typeof rowKey === "function") {
+        return rowKey(data, index);
+    } else {
+        return data[rowKey] as any;
+    }
+}

package/src/core/FlatList/shared/Spinner/index.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import {Spin} from "../../../Spin";
+import "./index.less";
+
+interface Props {
+    loading: boolean;
+    message?: string;
+}
+
+export const Spinner = (props: Props) => {
+    const {loading, message} = props;
+    return (
+        <div className="g-flat-list-spinner">
+            <Spin spinning={loading} size="small" />
+            <div className="message">{message}</div>
+        </div>
+    );
+};

package/src/core/FlatList/shared/Wrapper/Loading.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import {Spinner} from "../Spinner";
+
+interface Props {
+    loading: boolean;
+    message?: React.ReactElement | string;
+    loadingMessage?: React.ReactElement | string;
+}
+
+export const Loading = (props: Props) => {
+    const {loading, message, loadingMessage} = props;
+    return (
+        <div className="g-flat-list-loading">
+            {loading ? typeof loadingMessage !== "object" ? <Spinner loading={loading} message={loadingMessage ?? "loading..."} /> : loadingMessage : message ?? "Release to refresh"}
+        </div>
+    );
+};

package/src/core/FlatList/shared/Wrapper/index.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import {classNames} from "../../../../util/ClassNames";
+import {Direction} from "../../../../hooks/useSwipe";
+import {useTransform} from "../../../../hooks/useTransform";
+import {useBounceSwipe} from "../hooks/useBounceSwipe";
+import {useElementScrollState} from "../hooks/useElementScrollState";
+import type {FlatListProps, LoadingType} from "../../type";
+import {PULL_DOWN_REFRESH_THRESHOLD} from "../../type";
+import {Loading} from "./Loading";
+import "./index.less";
+
+interface Props<T>
+    extends Pick<FlatListProps<T>, "loading" | "bounceEffect" | "onPullUpLoading" | "onPullDownRefresh" | "className" | "style" | "pullDownRefreshMessage" | "pullDownRefreshingMessage"> {
+    children: React.ReactNode;
+    listWrapperRef: React.RefObject<HTMLDivElement>;
+    loadingType: LoadingType;
+    onLoadingTypeChange: (type: LoadingType) => void;
+    innerClassName?: string;
+    innerStyle?: React.CSSProperties;
+    onScroll?: (event: React.UIEvent) => void;
+}
+
+export const Wrapper = function <T>(props: Props<T>) {
+    const {
+        children,
+        bounceEffect,
+        listWrapperRef,
+        loadingType,
+        onLoadingTypeChange,
+        loading = false,
+        onPullDownRefresh,
+        onPullUpLoading,
+        className,
+        innerClassName,
+        style,
+        innerStyle,
+        pullDownRefreshMessage,
+        pullDownRefreshingMessage,
+        onScroll,
+    } = props;
+    const startOffsetRef = React.useRef(0);
+
+    const animatedRef = React.useRef<HTMLDivElement>(null);
+
+    const loadingTypeRef = React.useRef<LoadingType>(null);
+    loadingTypeRef.current = loadingType;
+
+    const onLoadingTypeChangeRef = React.useRef(onLoadingTypeChange);
+    onLoadingTypeChangeRef.current = onLoadingTypeChange;
+
+    const {isScrollable} = useElementScrollState(listWrapperRef);
+    const transform = useTransform(animatedRef);
+    const transformRef = React.useRef(transform);
+    transformRef.current = transform;
+
+    const reset = React.useCallback(() => {
+        startOffsetRef.current = 0;
+    }, []);
+
+    const handlers = useBounceSwipe({
+        axis: "vertical",
+        contentRef: listWrapperRef,
+        animatedRef,
+        onStart: ({delta: [, y]}) => {
+            startOffsetRef.current = y;
+        },
+        onEnd: ({delta, direction, boundary}) => {
+            if (loading) {
+                if (boundary !== "upper") {
+                    transform.to({
+                        y: PULL_DOWN_REFRESH_THRESHOLD,
+                    });
+                }
+            } else {
+                if (Math.abs(startOffsetRef.current - delta[1]) >= PULL_DOWN_REFRESH_THRESHOLD) {
+                    const scrollable = isScrollable("vertical");
+                    if (boundary === "upper" || (!scrollable && direction === Direction.DOWN)) {
+                        onLoadingTypeChange("refresh");
+                        onPullDownRefresh?.();
+                    } else {
+                        onLoadingTypeChange("loading");
+                        onPullUpLoading?.();
+                    }
+                }
+            }
+            reset();
+        },
+        onCancel: reset,
+    });
+
+    const handleScroll = React.useCallback(
+        (e: React.UIEvent) => {
+            transformRef.current.clear();
+            onScroll?.(e);
+        },
+        [onScroll]
+    );
+
+    React.useEffect(() => {
+        if (loading) {
+            if (loadingTypeRef.current === "refresh") {
+                transformRef.current.to({
+                    y: PULL_DOWN_REFRESH_THRESHOLD,
+                    immediate: false,
+                });
+            }
+        } else {
+            transformRef.current.clear();
+            onLoadingTypeChangeRef.current(null);
+        }
+    }, [loading]);
+
+    return (
+        <div className={classNames(className, "g-flat-list-wrapper")} style={style} {...(bounceEffect ? handlers : {})}>
+            <div className={classNames("inner-container", innerClassName)} style={innerStyle} ref={animatedRef}>
+                <Loading loading={loading && loadingType === "refresh"} message={pullDownRefreshMessage} loadingMessage={pullDownRefreshingMessage} />
+                <div className="list-wrapper" ref={listWrapperRef} onScroll={handleScroll}>
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+};

package/src/core/FlatList/shared/hooks/useBounceSwipe.ts

@@ -0,0 +1,120 @@
+import React from "react";
+import {useElementScrollState} from "./useElementScrollState";
+import type {SwipeHookResult, SwipeState} from "../../../../hooks/useSwipe";
+import {Direction, useSwipe} from "../../../../hooks/useSwipe";
+import {useTransform} from "../../../../hooks/useTransform";
+
+export type Boundary = "upper" | "lower" | null;
+
+interface BounceSwipeState extends SwipeState {
+    // always be null when inner content is not scrollable
+    boundary: Boundary;
+}
+
+export type BounceSwipeHandler = (state: BounceSwipeState) => void;
+
+type BounceSwipeHookResult = SwipeHookResult;
+
+interface BounceSwipeHandlers {
+    onMove?: BounceSwipeHandler;
+    onStart?: BounceSwipeHandler;
+    onEnd?: BounceSwipeHandler;
+    onCancel?: BounceSwipeHandler;
+}
+
+interface BounceSwipeOption extends BounceSwipeHandlers {
+    axis: "vertical" | "horizontal";
+    // Use to determine content is scrollable or not
+    contentRef: React.RefObject<HTMLElement>;
+    // Element Ref which is going to be applied bounce transform and animation
+    animatedRef: React.RefObject<HTMLElement>;
+    baseOffset?: number;
+}
+
+export const useBounceSwipe = (options: BounceSwipeOption): BounceSwipeHookResult => {
+    const {contentRef, animatedRef, axis, baseOffset = 0, onStart, onMove, onEnd, onCancel} = options;
+    const [boundary, setBoundary] = React.useState<Boundary>(null);
+    const transform = useTransform(animatedRef, {duration: 300, timingFunction: "cubic-bezier(0, 0.61, 0.28, 1.22)", property: "transform"});
+    const startOffsetRef = React.useRef(0);
+
+    const isX = React.useMemo(() => axis === "horizontal", [axis]);
+    const isY = React.useMemo(() => axis === "vertical", [axis]);
+    const {isScrollable, isScrollTop, isScrollBottom, isScrollLeft, isScrollRight} = useElementScrollState(contentRef);
+
+    const threshold = ({direction}: SwipeState): boolean => {
+        if (isY) {
+            return (direction === Direction.DOWN && isScrollTop()) || (direction === Direction.UP && isScrollBottom());
+        } else {
+            return (direction === Direction.RIGHT && isScrollLeft()) || (direction === Direction.LEFT && isScrollRight());
+        }
+    };
+
+    const clearSwipe = () => {
+        startOffsetRef.current = 0;
+        setBoundary(null);
+    };
+
+    React.useEffect(() => {
+        // Changing overflow style to fixed laggy bounce swipe in chrome
+        if (contentRef.current) {
+            if (boundary) {
+                contentRef.current.style.overflow = "hidden";
+            } else {
+                contentRef.current.style.overflow = "auto";
+            }
+        }
+    }, [boundary, contentRef]);
+
+    const getOffset = (delta: [number, number], boundary: Boundary): Readonly<[number, number]> | null => {
+        let resultOffset: Readonly<[number, number]> | null = [0, 0];
+        const limitedOffset = delta[isX ? 0 : 1] - startOffsetRef.current + baseOffset;
+        const computeResultOffset = (value: number) => [isX ? value : 0, isY ? value : 0] as const;
+        if (boundary === "upper") {
+            resultOffset = limitedOffset < 0 ? null : computeResultOffset(limitedOffset);
+        } else if (boundary === "lower") {
+            resultOffset = limitedOffset > 0 ? null : computeResultOffset(limitedOffset);
+        } else {
+            resultOffset = computeResultOffset(limitedOffset);
+        }
+
+        return resultOffset;
+    };
+
+    const handlers = useSwipe(
+        {
+            onStart: state => {
+                const {
+                    delta: [x, y],
+                    direction,
+                } = state;
+                isScrollable(axis) && setBoundary(direction === Direction.DOWN ? "upper" : "lower");
+                startOffsetRef.current = isX ? x : y;
+                onStart?.({...state, boundary});
+            },
+            onMove: state => {
+                const {delta, cancel} = state;
+                const offset = getOffset(delta, boundary);
+                if (!offset) {
+                    cancel();
+                } else {
+                    const [x, y] = offset;
+                    transform.to({x, y, immediate: true});
+                    onMove?.({...state, boundary});
+                }
+            },
+            onEnd: state => {
+                onEnd?.({...state, boundary});
+                transform.clear();
+                clearSwipe();
+            },
+            onCancel: state => {
+                onCancel?.({...state, boundary});
+                transform.clear();
+                clearSwipe();
+            },
+        },
+        {threshold}
+    );
+
+    return handlers;
+};

package/src/core/FlatList/shared/hooks/useElementScrollState.ts

@@ -0,0 +1,43 @@
+import React from "react";
+
+// need to cache scrollable results
+
+// only change when window resize, data change, and css change
+
+export const useElementScrollState = (ref: React.RefObject<HTMLElement | null>) => {
+    const isScrollable = React.useCallback(
+        (direction: "vertical" | "horizontal") => {
+            if (ref.current) {
+                const element = ref.current;
+                return direction === "vertical" ? element.scrollHeight > element.clientHeight : element.scrollWidth > element.clientWidth;
+            } else {
+                return false;
+            }
+        },
+        [ref]
+    );
+
+    const isScrollTop = React.useCallback(() => ref.current?.scrollTop === 0, [ref]);
+    const isScrollBottom = React.useCallback(() => {
+        const element = ref.current;
+        if (element) {
+            const {scrollHeight, scrollTop, clientHeight} = element;
+            return Math.ceil(scrollTop) + clientHeight >= scrollHeight;
+        } else {
+            return false;
+        }
+    }, [ref]);
+
+    const isScrollLeft = React.useCallback(() => ref.current?.scrollLeft === 0, [ref]);
+    const isScrollRight = React.useCallback(() => {
+        const element = ref.current;
+        if (element) {
+            const {scrollWidth, scrollLeft, clientWidth} = element;
+            return Math.ceil(scrollLeft) + clientWidth >= scrollWidth;
+        } else {
+            return false;
+        }
+    }, [ref]);
+
+    return {isScrollTop, isScrollBottom, isScrollLeft, isScrollRight, isScrollable};
+};

package/src/core/FlatList/shared/hooks/useLoadingWithDelay.ts

@@ -0,0 +1,40 @@
+import React from "react";
+
+/**
+ * This hook prevent loading state causing ui to flash
+ * For instance, in real life loading only last for 50ms, so it make loading ui appear in a blink of an eye, which is not good
+ * Hook will only delay the loading state change from true to false, it force loading ui at least appear for a period of time
+ * @param loading
+ * @param delay
+ * @returns
+ */
+export const useLoadingWithDelay = (loading: boolean, delay: number): Readonly<boolean> => {
+    const [loadingWithDelay, setLoadingWithDelay] = React.useState(loading);
+    const startTimeRef = React.useRef<number | null>(null);
+    const setLoadingRef = React.useRef<(value: boolean) => void>();
+
+    const setLoading = React.useCallback(
+        (value: boolean) => {
+            if (value) {
+                setLoadingWithDelay(true);
+                startTimeRef.current = Date.now();
+                setTimeout(() => (startTimeRef.current = null), delay);
+            } else {
+                if (startTimeRef.current) {
+                    setTimeout(() => setLoadingWithDelay(false), Math.abs(delay - (Date.now() - startTimeRef.current)));
+                } else {
+                    setLoadingWithDelay(value);
+                }
+            }
+        },
+        [delay]
+    );
+
+    setLoadingRef.current = setLoading;
+
+    React.useEffect(() => {
+        setLoadingRef.current?.(loading);
+    }, [loading]);
+
+    return loadingWithDelay;
+};