fix: ai review

Author: Raubzeug

src/containers/App/Content.tsx

@@ -14,7 +14,7 @@ import routes, {getClusterPath} from '../../routes';
 import type {RootState} from '../../store';
 import {authenticationApi} from '../../store/reducers/authentication/authentication';
 import {
-    useAllCapablitiesStatus,
+    useAllCapabilitiesStatus,
     useClusterWithoutAuthInUI,
     useMetaCapabilitiesLoaded,
     useMetaCapabilitiesQuery,
@@ -235,7 +235,7 @@ function GetNodesList() {
 }
 
 function GetCapabilities({children}: {children: React.ReactNode}) {
-    const {error, loading} = useAllCapablitiesStatus();
+    const {error, loading} = useAllCapabilitiesStatus();
 
     //do nothing, authentication is in progress upon redirect
     if (isRedirectToAuth(error)) {

src/containers/Header/Header.tsx

@@ -19,7 +19,7 @@ import {checkIsClustersPage, checkIsTenantPage, getClusterPath} from '../../rout
 import {environment} from '../../store';
 import {
     useAddClusterFeatureAvailable,
-    useAllCapablitiesStatus,
+    useAllCapabilitiesStatus,
     useDatabasesAvailable,
     useDeleteDatabaseFeatureAvailable,
     useEditDatabaseFeatureAvailable,
@@ -51,7 +51,7 @@ import './Header.scss';
 const b = cn('header');
 
 function Header() {
-    const {loading} = useAllCapablitiesStatus();
+    const {loading} = useAllCapabilitiesStatus();
     const {page, pageBreadcrumbsOptions} = useTypedSelector((state) => state.header);
     const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();

src/store/reducers/capabilities/hooks.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type {Capability, MetaCapability, SecuritySetting} from '../../../types/api/capabilities';
 import {uiFactory} from '../../../uiFactory/uiFactory';
 import {useTypedSelector} from '../../../utils/hooks';
@@ -30,7 +32,7 @@ export function useCapabilitiesLoaded() {
     return Boolean(data || error);
 }
 
-export function useAllCapablitiesStatus() {
+export function useAllCapabilitiesStatus() {
     const {data, error} = useCapabilitiesQuery();
 
     useMetaCapabilitiesQuery();
@@ -39,7 +41,10 @@ export function useAllCapablitiesStatus() {
 
     const capabilitiesLoaded = Boolean(data || error);
 
-    return {error, loading: !capabilitiesLoaded || !metaCapabilitiesLoaded};
+    return React.useMemo(
+        () => ({error, loading: !capabilitiesLoaded || !metaCapabilitiesLoaded}),
+        [error, capabilitiesLoaded, metaCapabilitiesLoaded],
+    );
 }
 
 const useGetFeatureVersion = (feature: Capability) => {