[@mantine/hooks] use-idle: Fix idle countdown not starting if the use…

…r did non interact with the page (#6683)

* [@mantine/hooks] use-idle: Start timer immediately instead of waiting for an event (#6682)

* [@mantine/hooks] use-idle: Fix test formatting (#6682)

---------

Co-authored-by: Bill Parrott <[email protected]>

packages/@mantine/hooks/src/use-idle/use-idle.test.tsx

@@ -11,6 +11,22 @@ describe('@mantine/hooks/use-idle', () => {
     expect(hook.result.current).toBe(true);
   });
 
+  it('Starts the timer immediately instead of waiting for the first event to happen', () => {
+    const spy = jest.spyOn(window, 'setTimeout');
+    expect(spy).not.toHaveBeenCalled();
+
+    const hook = renderHook(() =>
+      useIdle(1000, { initialState: false, events: ['click', 'keypress'] })
+    );
+
+    expect(hook.result.current).toBe(false);
+    expect(spy).toHaveBeenCalledTimes(1);
+    setTimeout(() => {
+      expect(hook.result.current).toBe(true);
+      expect(spy).toHaveBeenCalledTimes(2);
+    }, 1001);
+  });
+
   it('Returns correct value on firing keypress event', () => {
     const hook = renderHook(() => useIdle(1000));
 

packages/@mantine/hooks/src/use-idle/use-idle.ts

@@ -35,6 +35,11 @@ export function useIdle(
 
     events.forEach((event) => document.addEventListener(event, handleEvents));
 
+    // Start the timer immediately instead of waiting for the first event to happen
+    timer.current = window.setTimeout(() => {
+      setIdle(true);
+    }, timeout);
+
     return () => {
       events.forEach((event) => document.removeEventListener(event, handleEvents));
     };