overtime.elapsedTime not reported when isFetching on on isLoading
overtime.elapsedTime not reported when isFetching only on isLoading
13 Replies
Hi @Joe Gaffney. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The
overtime.elapsedTime
is a property returned by several hooks in Refine, such as useTable
, useDataGrid
, useForm
, useShow
, and useModalForm
. This property represents the elapsed time in milliseconds and becomes undefined
when the request is completed.
If overtime.elapsedTime
is not reported when isFetching
or isLoading
is on, it might be due to the request being completed, hence setting elapsedTime
to undefined
.
Here is an example of how to use overtime.elapsedTime
with useTable
hook:
And with useForm
hook:
If you want to show a loading indicator when the request takes too long, you can pass the overtimeOptions
prop to the hook. It accepts interval
as number
to determine the ticking intervals and onInterval
to be called on each tick.
For more details, you can refer to the documentation of useTable (https://refine.dev/docs/data/hooks/use-table#overtime), useDataGrid (https://refine.dev/docs/ui-integrations/material-ui/hooks/use-data-grid#overtime), useForm (https://refine.dev/docs/data/hooks/use-form#overtime), useShow (https://refine.dev/docs/data/hooks/use-show#overtime), and useModalForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form#overtime).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below
wise-white•7mo ago
@kapa.ai it wont report when re fetching
Let me check the knowledge base for you. One moment! :books:
----------------------
The
overtime.elapsedTime
property in Refine's hooks represents the elapsed time in milliseconds for a request and becomes undefined
when the request is completed. If you're experiencing an issue where overtime.elapsedTime
is not reported during a re-fetching operation, it might be due to the request being completed quickly, hence setting elapsedTime
to undefined
.
Here's an example of how you might use overtime.elapsedTime
with the useTable
hook:
If you want to show a loading indicator when the request takes too long, you can pass the overtimeOptions
prop to the hook. It accepts interval
as number
to determine the ticking intervals and onInterval
to be called on each tick.
For more details, you can refer to the documentation of useTable (https://refine.dev/docs/data/hooks/use-table#overtime), useDataGrid (https://refine.dev/docs/ui-integrations/material-ui/hooks/use-data-grid#overtime), useForm (https://refine.dev/docs/data/hooks/use-form#overtime), useShow (https://refine.dev/docs/data/hooks/use-show#overtime), and useModalForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form#overtime).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsia•7mo ago
Hey @Joe Gaffney please be as explicit as possible and try to explain your issue with details. If you provide a code examples with some comments, bot can help you.
wise-white•7mo ago
Hey @Batu yeah the bot is pretty good, but think this issue is more with react query as the initially loading will show the elapasedTime, but not when you refetch. I will try giving it an example, but think it maybe beyond its scope.
@kapa.ai here is an example when isFetching overtime.elapsedTime is undefined unless its the first load.
Let me check the knowledge base for you. One moment! :books:
----------------------
In your code,
overtime.elapsedTime
is logged to the console when isFetching
is true
. This means that a fetch operation is in progress. However, overtime.elapsedTime
becomes undefined
when the request is completed.
If overtime.elapsedTime
is undefined
during subsequent fetch operations (not the first load), it might be due to the request being completed quickly, hence setting elapsedTime
to undefined
.
If you want to show a loading indicator when the request takes too long, you can pass the overtimeOptions
prop to the hook. It accepts interval
as number
to determine the ticking intervals and onInterval
to be called on each tick.
For more details, you can refer to the documentation of useTable (https://refine.dev/docs/data/hooks/use-table#overtime), useDataGrid (https://refine.dev/docs/ui-integrations/material-ui/hooks/use-data-grid#overtime), useForm (https://refine.dev/docs/data/hooks/use-form#overtime), useShow (https://refine.dev/docs/data/hooks/use-show#overtime), and useModalForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form#overtime).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsia•7mo ago
Yeah. Its because elapsed time is belongs to interval. It returns elapsed time, so you can decide when to fetch. When you fetch, it resets. Because its not waiting. You can think elapsed time as time passed since request is triggered without fetch.
We give users elapsedTime, so they can decide when to actually fetch after triggering . Maybe 1000ms later, or 500ms
wise-white•7mo ago
right i guess what i was looking for was to know if the refetch itself is taking a long time. To show a loading indicator. isFetching does report correctly that it is fetching.
flat-fuchsia•7mo ago
elapsedTime isnt the time fetch itself takes. Its the time before fetch.
wise-white•7mo ago
I think on the first ever request the timing is correct it would be when the onSucess has finished? Unless i missed something
But i guess as data is already in the cache it is probably not as useful to show a loading and just refresh the data when it is refetched.