From 9251558f26418fc71e6cd3f3b2f9c3c84b0f48af Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 18 Apr 2024 13:50:39 +0700
Subject: [PATCH 1/2] feat: add timeout to delegator count fetching

---
 CHANGELOG.md                         |  1 +
 src/lib/services/validatorService.ts | 11 +++++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ede8f22a3..eb64827e5 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/lib/services/validatorService.ts b/src/lib/services/validatorService.ts
index bbd28bfc6..f57986186 100644
--- a/src/lib/services/validatorService.ts
+++ b/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),
+    { retry: false }
   );
 };
 

From 03aff240705470e601e9860520de10240d5bc966 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 18 Apr 2024 13:53:43 +0700
Subject: [PATCH 2/2] feat: set timeout to 10s

---
 src/lib/services/validatorService.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/services/validatorService.ts b/src/lib/services/validatorService.ts
index f57986186..e81c0d9fd 100644
--- a/src/lib/services/validatorService.ts
+++ b/src/lib/services/validatorService.ts
@@ -244,7 +244,7 @@ export const useValidatorDelegators = (validatorAddress: ValidatorAddr) => {
 
   return useQuery(
     [CELATONE_QUERY_KEYS.VALIDATOR_DELEGATORS, endpoint, validatorAddress],
-    createQueryFnWithTimeout(queryFn),
+    createQueryFnWithTimeout(queryFn, 10000),
     { retry: false }
   );
 };