refactor(core): remove duplicated overtime intervals (#6626)

.changeset/giant-carrots-deny.md

@@ -0,0 +1,9 @@
+---
+"@refinedev/core": patch
+---
+
+feat(core): add `enabled` prop to `useLoadingOvertime` and `overtimeOptions`
+
+Added missing `enabled` prop to `useLoadingOvertime` and added ability to globally configure through `options.overtime.enabled`.
+
+Due to the nature of calculating elapsed time, an interval is set by the `interval` prop. This was causing unwanted updates in the return value and there was no way to disable it properly.

.changeset/perfect-donkeys-cheat.md

@@ -0,0 +1,11 @@
+---
+"@refinedev/core": patch
+---
+
+refactor(core): remove duplicated overtime intervals caused by internally used hooks
+
+Updated Refine's data hooks and extensions to prevent duplicated overtime intervals from being created. This uses the `enabled` prop to prevent internal hooks from registering the intervals.
+
+Prior to this change, `useTable` was initializing its own `useLoadingOvertime` hook but also propagated the `elapsedTime` from `useList` hook which is used internally by `useTable`. This caused duplicated intervals and unwanted updates.
+
+This now ensures a single interval is created and used for the extension hooks.

documentation/docs/core/refine-component/index.md

@@ -604,6 +604,7 @@ const App = () => (
     // highlight-start
     options={{
       overtime: {
+        enabled: true,
         interval: 1000, // default value is 1000
         onInterval: (elapsedInterval, context) => {
           console.log(elapsedInterval, context);
@@ -615,6 +616,10 @@ const App = () => (
 );
 ```
 
+#### enabled
+
+If true, the elapsed time will be calculated. If set to false, the elapsed time will always be `undefined`.
+
 #### interval
 
 The interval value in milliseconds. The default value is `1000`.

packages/core/src/contexts/refine/index.tsx

@@ -51,6 +51,7 @@ export const defaultRefineOptions: IRefineContextOptions = {
     afterEdit: "list",
   },
   overtime: {
+    enabled: true,
     interval: 1000,
   },
   textTransformers: {

packages/core/src/definitions/helpers/handleRefineOptions/index.spec.ts

@@ -53,6 +53,7 @@ describe("handleRefineOptions", () => {
       },
       breadcrumb: false,
       overtime: {
+        enabled: true,
         interval: 1000,
       },
       textTransformers: {
@@ -123,6 +124,7 @@ describe("handleRefineOptions", () => {
         afterEdit: "list",
       },
       overtime: {
+        enabled: true,
         interval: 1000,
       },
       textTransformers: {
@@ -177,6 +179,7 @@ describe("handleRefineOptions", () => {
         afterEdit: "list",
       },
       overtime: {
+        enabled: true,
         interval: 1000,
       },
       textTransformers: {

packages/core/src/hooks/data/useCreate.ts

@@ -315,9 +315,8 @@ export const useCreate = <
   const { mutate, mutateAsync, ...mutation } = mutationResult;
 
   const { elapsedTime } = useLoadingOvertime({
+    ...overtimeOptions,
     isLoading: mutation.isLoading,
-    interval: overtimeOptions?.interval,
-    onInterval: overtimeOptions?.onInterval,
   });
 
   // this function is used to make the `variables` parameter optional

packages/core/src/hooks/data/useCreateMany.ts

@@ -293,9 +293,8 @@ export const useCreateMany = <
   const { mutate, mutateAsync, ...mutation } = mutationResult;
 
   const { elapsedTime } = useLoadingOvertime({
+    ...overtimeOptions,
     isLoading: mutation.isLoading,
-    interval: overtimeOptions?.interval,
-    onInterval: overtimeOptions?.onInterval,
   });
 
   // this function is used to make the `variables` parameter optional

packages/core/src/hooks/data/useCustom.ts

@@ -217,9 +217,8 @@ export const useCustom = <
       },
     });
     const { elapsedTime } = useLoadingOvertime({
+      ...overtimeOptions,
       isLoading: queryResponse.isFetching,
-      interval: overtimeOptions?.interval,
-      onInterval: overtimeOptions?.onInterval,
     });
 
     return { ...queryResponse, overtime: { elapsedTime } };

packages/core/src/hooks/data/useCustomMutation.ts

@@ -215,9 +215,8 @@ export const useCustomMutation = <
   );
 
   const { elapsedTime } = useLoadingOvertime({
+    ...overtimeOptions,
     isLoading: mutation.isLoading,
-    interval: overtimeOptions?.interval,
-    onInterval: overtimeOptions?.onInterval,
   });
 
   return { ...mutation, overtime: { elapsedTime } };

packages/core/src/hooks/data/useDelete.ts

@@ -493,9 +493,8 @@ export const useDelete = <
   });
 
   const { elapsedTime } = useLoadingOvertime({
+    ...overtimeOptions,
     isLoading: mutation.isLoading,
-    interval: overtimeOptions?.interval,
-    onInterval: overtimeOptions?.onInterval,
   });
 
   return { ...mutation, overtime: { elapsedTime } };

packages/core/src/hooks/data/useDeleteMany.ts

@@ -524,9 +524,8 @@ export const useDeleteMany = <
   });
 
   const { elapsedTime } = useLoadingOvertime({
+    ...overtimeOptions,
     isLoading: mutation.isLoading,
-    interval: overtimeOptions?.interval,
-    onInterval: overtimeOptions?.onInterval,
   });
 
   return { ...mutation, overtime: { elapsedTime } };

packages/core/src/hooks/data/useInfiniteList.ts

@@ -320,9 +320,8 @@ export const useInfiniteList = <
   });
 
   const { elapsedTime } = useLoadingOvertime({
+    ...overtimeOptions,
     isLoading: queryResponse.isFetching,
-    interval: overtimeOptions?.interval,
-    onInterval: overtimeOptions?.onInterval,
   });
 
   return { ...queryResponse, overtime: { elapsedTime } };

packages/core/src/hooks/data/useList.ts

@@ -326,9 +326,8 @@ export const useList = <
   });
 
   const { elapsedTime } = useLoadingOvertime({
+    ...overtimeOptions,
     isLoading: queryResponse.isFetching,
-    interval: overtimeOptions?.interval,
-    onInterval: overtimeOptions?.onInterval,
   });
 
   return { ...queryResponse, overtime: { elapsedTime } };

packages/core/src/hooks/data/useMany.ts

@@ -240,9 +240,8 @@ export const useMany = <
   });
 
   const { elapsedTime } = useLoadingOvertime({
+    ...overtimeOptions,
     isLoading: queryResponse.isFetching,
-    interval: overtimeOptions?.interval,
-    onInterval: overtimeOptions?.onInterval,
   });
 
   return { ...queryResponse, overtime: { elapsedTime } };

packages/core/src/hooks/data/useOne.ts

@@ -244,9 +244,8 @@ export const useOne = <
   });
 
   const { elapsedTime } = useLoadingOvertime({
+    ...overtimeOptions,
     isLoading: queryResponse.isFetching,
-    interval: overtimeOptions?.interval,
-    onInterval: overtimeOptions?.onInterval,
   });
 
   return { ...queryResponse, overtime: { elapsedTime } };

packages/core/src/hooks/data/useUpdate.ts

@@ -639,9 +639,8 @@ export const useUpdate = <
   const { mutate, mutateAsync, ...mutation } = mutationResult;
 
   const { elapsedTime } = useLoadingOvertime({
+    ...overtimeOptions,
     isLoading: mutation.isLoading,
-    interval: overtimeOptions?.interval,
-    onInterval: overtimeOptions?.onInterval,
   });
 
   // this function is used to make the `variables` parameter optional

packages/core/src/hooks/data/useUpdateMany.ts

@@ -676,9 +676,8 @@ export const useUpdateMany = <
   const { mutate, mutateAsync, ...mutation } = mutationResult;
 
   const { elapsedTime } = useLoadingOvertime({
+    ...overtimeOptions,
     isLoading: mutation.isLoading,
-    interval: overtimeOptions?.interval,
-    onInterval: overtimeOptions?.onInterval,
   });
 
   // this function is used to make the `variables` parameter optional

packages/core/src/hooks/form/index.ts

@@ -169,24 +169,26 @@ export const useForm = <
     liveParams: props.liveParams,
     meta: { ...combinedMeta, ...props.queryMeta },
     dataProviderName: props.dataProviderName,
+    overtimeOptions: { enabled: false },
   });
 
   const createMutation = useCreate<TResponse, TResponseError, TVariables>({
     mutationOptions: props.createMutationOptions,
+    overtimeOptions: { enabled: false },
   });
 
   const updateMutation = useUpdate<TResponse, TResponseError, TVariables>({
     mutationOptions: props.updateMutationOptions,
+    overtimeOptions: { enabled: false },
   });
 
   const mutationResult = isEdit ? updateMutation : createMutation;
   const isMutationLoading = mutationResult.isLoading;
   const formLoading = isMutationLoading || queryResult.isFetching;
 
   const { elapsedTime } = useLoadingOvertime({
+    ...props.overtimeOptions,
     isLoading: formLoading,
-    interval: props.overtimeOptions?.interval,
-    onInterval: props.overtimeOptions?.onInterval,
   });
 
   React.useEffect(() => {

packages/core/src/hooks/show/index.ts

@@ -1,5 +1,5 @@
 import warnOnce from "warn-once";
-import { useMeta, useOne, useResourceParams, useLoadingOvertime } from "@hooks";
+import { useMeta, useOne, useResourceParams } from "@hooks";
 import { pickNotDeprecated } from "@definitions/helpers";
 
 import type { UseShowProps, UseShowReturnType } from "./types";
@@ -71,21 +71,16 @@ export const useShow = <
     },
     meta: combinedMeta,
     metaData: combinedMeta,
+    overtimeOptions,
     ...useOneProps,
   });
 
-  const { elapsedTime } = useLoadingOvertime({
-    isLoading: queryResult.isFetching,
-    interval: overtimeOptions?.interval,
-    onInterval: overtimeOptions?.onInterval,
-  });
-
   return {
     queryResult,
     query: queryResult,
     showId,
     setShowId,
-    overtime: { elapsedTime },
+    overtime: queryResult.overtime,
   };
 };
 

packages/core/src/hooks/useLoadingOvertime/index.spec.tsx

@@ -147,4 +147,25 @@ describe("useLoadingOvertime Hook", () => {
     expect(onInterval).toBeCalledTimes(1);
     expect(onInterval).toBeCalledWith(1000);
   });
+
+  it("should not run interval when enabled is false", () => {
+    const { result } = renderHook(
+      () =>
+        useLoadingOvertime({
+          isLoading: true,
+          enabled: false,
+        }),
+      {
+        wrapper: TestWrapper({}),
+      },
+    );
+
+    act(() => {
+      jest.advanceTimersByTime(2000);
+    });
+
+    const { elapsedTime } = result.current;
+
+    expect(elapsedTime).toBeUndefined();
+  });
 });

packages/core/src/hooks/useLoadingOvertime/index.ts

@@ -27,6 +27,13 @@ type UseLoadingOvertimeCoreReturnType = {
 };
 
 export type UseLoadingOvertimeCoreProps = {
+  /**
+   * If true, the elapsed time will be calculated. If set to false; the elapsed time will be `undefined`.
+   *
+   * @default: true
+   */
+  enabled?: boolean;
+
   /**
    * The loading state. If true, the elapsed time will be calculated.
    */
@@ -63,6 +70,7 @@ export type UseLoadingOvertimeCoreProps = {
  * });
  */
 export const useLoadingOvertime = ({
+  enabled: enabledProp,
   isLoading,
   interval: intervalProp,
   onInterval: onIntervalProp,
@@ -75,11 +83,17 @@ export const useLoadingOvertime = ({
   // pick props or refine context options
   const interval = intervalProp ?? overtime.interval;
   const onInterval = onIntervalProp ?? overtime?.onInterval;
+  const enabled =
+    typeof enabledProp !== "undefined"
+      ? enabledProp
+      : typeof overtime.enabled !== "undefined"
+        ? overtime.enabled
+        : true;
 
   useEffect(() => {
     let intervalFn: ReturnType<typeof setInterval>;
 
-    if (isLoading) {
+    if (enabled && isLoading) {
       intervalFn = setInterval(() => {
         // increase elapsed time
         setElapsedTime((prevElapsedTime) => {
@@ -93,11 +107,13 @@ export const useLoadingOvertime = ({
     }
 
     return () => {
-      clearInterval(intervalFn);
+      if (typeof intervalFn !== "undefined") {
+        clearInterval(intervalFn);
+      }
       // reset elapsed time
       setElapsedTime(undefined);
     };
-  }, [isLoading, interval]);
+  }, [isLoading, interval, enabled]);
 
   useEffect(() => {
     // call onInterval callback

packages/core/src/hooks/useSelect/index.ts

@@ -303,6 +303,7 @@ export const useSelect = <
         defaultValueQueryOptions?.onSuccess?.(data);
       },
     },
+    overtimeOptions: { enabled: false },
     meta: combinedMeta,
     metaData: combinedMeta,
     liveMode: "off",
@@ -341,6 +342,7 @@ export const useSelect = <
         queryOptions?.onSuccess?.(data);
       },
     },
+    overtimeOptions: { enabled: false },
     successNotification,
     errorNotification,
     meta: combinedMeta,
@@ -352,9 +354,8 @@ export const useSelect = <
   });
 
   const { elapsedTime } = useLoadingOvertime({
+    ...overtimeOptions,
     isLoading: queryResult.isFetching || defaultValueQueryResult.isFetching,
-    interval: overtimeOptions?.interval,
-    onInterval: overtimeOptions?.onInterval,
   });
 
   const combinedOptions = useMemo(