Merge pull request #888 from alleslabs/feat/add-timeout-delegators

add timeout to delegator count fetching

CHANGELOG.md

@@ -102,6 +102,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#888](https://github.com/alleslabs/celatone-frontend/pull/888) Apply timeout for delegator counts on validator detail
 - [#863](https://github.com/alleslabs/celatone-frontend/pull/863) Add link to user document (move)
 - [#883](https://github.com/alleslabs/celatone-frontend/pull/883) Improve validator badge to have a dynamic width
 - [#884](https://github.com/alleslabs/celatone-frontend/pull/884) Bump cosmjs tx parsing problem

src/lib/services/validatorService.ts

@@ -4,12 +4,14 @@ import type {
   UseQueryResult,
 } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
+import { useCallback } from "react";
 
 import {
   CELATONE_QUERY_KEYS,
   useBaseApiRoute,
   useCurrentChain,
 } from "lib/app-provider";
+import { createQueryFnWithTimeout } from "lib/query-utils";
 import type {
   Nullable,
   Option,
@@ -235,10 +237,15 @@ export const useValidatorProposedBlocks = (
 export const useValidatorDelegators = (validatorAddress: ValidatorAddr) => {
   const endpoint = useBaseApiRoute("validators");
 
+  const queryFn = useCallback(
+    async () => getValidatorDelegators(endpoint, validatorAddress),
+    [endpoint, validatorAddress]
+  );
+
   return useQuery(
     [CELATONE_QUERY_KEYS.VALIDATOR_DELEGATORS, endpoint, validatorAddress],
-    async () => getValidatorDelegators(endpoint, validatorAddress),
-    { retry: 1 }
+    createQueryFnWithTimeout(queryFn, 10000),
+    { retry: false }
   );
 };