From 8928ab6b4e5407f87de5a425ed45fc2e5e36a9de Mon Sep 17 00:00:00 2001
From: Dorian Maliszewski <dmaliszewski@scaleway.com>
Date: Tue, 7 Jun 2022 12:20:17 +0200
Subject: [PATCH] fix: optimistic isloading value on hook mount

---
 packages/use-dataloader/src/useDataLoader.ts | 33 +++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/use-dataloader/src/useDataLoader.ts b/packages/use-dataloader/src/useDataLoader.ts
index 7c903d463..355db7376 100644
--- a/packages/use-dataloader/src/useDataLoader.ts
+++ b/packages/use-dataloader/src/useDataLoader.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useDataLoaderContext } from './DataLoaderProvider'
 import { StatusEnum } from './constants'
 import DataLoader from './dataloader'
@@ -41,9 +41,25 @@ function useDataLoader<ResultType, ErrorType = Error>(
     }
   }, [request, forceRerender])
 
+  const needLoad = useMemo(
+    () =>
+      !!(
+        enabled &&
+        (!request.dataUpdatedAt ||
+          !dataLifetime ||
+          (request.dataUpdatedAt &&
+            dataLifetime &&
+            request.dataUpdatedAt + dataLifetime < Date.now()))
+      ),
+    [enabled, request.dataUpdatedAt, dataLifetime],
+  )
+
+  const optimisticIsLoadingRef = useRef(needLoad)
+
   const previousDataRef = useRef(request.data)
 
-  const isLoading = request.status === StatusEnum.LOADING
+  const isLoading =
+    request.status === StatusEnum.LOADING || optimisticIsLoadingRef.current
 
   const isSuccess = request.status === StatusEnum.SUCCESS
 
@@ -87,18 +103,11 @@ function useDataLoader<ResultType, ErrorType = Error>(
   }, [request.data, keepPreviousData])
 
   useEffect(() => {
-    // If this request is enabled and not already called
-    if (
-      enabled &&
-      (!request.dataUpdatedAt ||
-        !dataLifetime ||
-        (request.dataUpdatedAt &&
-          dataLifetime &&
-          request.dataUpdatedAt + dataLifetime < Date.now()))
-    ) {
+    if (needLoad) {
       request.load().then(onSuccessRef.current).catch(onErrorRef.current)
     }
-  }, [enabled, request, keepPreviousData, dataLifetime])
+    optimisticIsLoadingRef.current = false
+  }, [needLoad, request])
 
   useEffect(() => {
     let interval: NodeJS.Timer