From 8a5c907f685e5436e73ab5257e83875d9cb81aad Mon Sep 17 00:00:00 2001
From: Elena Makarova <el-makarova@yandex-team.ru>
Date: Wed, 25 Dec 2024 16:04:14 +0300
Subject: [PATCH] fix(Cluster): show loader if capabilities not loaded

---
 src/containers/App/Content.tsx           | 14 +++++++++-----
 src/store/reducers/capabilities/hooks.ts |  2 +-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/containers/App/Content.tsx b/src/containers/App/Content.tsx
index 6f05e1fa8..6ca0f63d4 100644
--- a/src/containers/App/Content.tsx
+++ b/src/containers/App/Content.tsx
@@ -178,8 +178,7 @@ function DataWrapper({children}: {children: React.ReactNode}) {
     return (
         <GetUser>
             <GetNodesList />
-            <GetCapabilities />
-            {children}
+            <GetCapabilities>{children}</GetCapabilities>
         </GetUser>
     );
 }
@@ -199,9 +198,14 @@ function GetNodesList() {
     return null;
 }
 
-function GetCapabilities() {
-    useCapabilitiesQuery();
-    return null;
+function GetCapabilities({children}: {children: React.ReactNode}) {
+    const {isLoading} = useCapabilitiesQuery();
+
+    return (
+        <LoaderWrapper loading={isLoading} size="l">
+            {children}
+        </LoaderWrapper>
+    );
 }
 
 interface ContentWrapperProps {
diff --git a/src/store/reducers/capabilities/hooks.ts b/src/store/reducers/capabilities/hooks.ts
index cafdfdda7..cdf026748 100644
--- a/src/store/reducers/capabilities/hooks.ts
+++ b/src/store/reducers/capabilities/hooks.ts
@@ -15,7 +15,7 @@ function useDatabaseFromQuery() {
 export function useCapabilitiesQuery() {
     const database = useDatabaseFromQuery();
 
-    capabilitiesApi.useGetClusterCapabilitiesQuery({database});
+    return capabilitiesApi.useGetClusterCapabilitiesQuery({database});
 }
 
 export function useCapabilitiesLoaded() {