fix: add loader for healthcheck (#563)

Author: krosy1337

src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckDetails.tsx

@@ -3,6 +3,7 @@ import cn from 'bem-cn-lite';
 import type {IResponseError} from '../../../../../types/api/error';
 import type {IIssuesTree} from '../../../../../types/store/healthcheck';
 import {ResponseError} from '../../../../../components/Errors/ResponseError';
+import {Loader} from '../../../../../components/Loader';
 
 import IssueTree from './IssuesViewer/IssueTree';
 
@@ -13,17 +14,23 @@ const b = cn('healthcheck');
 
 interface HealthcheckDetailsProps {
     issueTrees?: IIssuesTree[];
+    loading?: boolean;
+    wasLoaded?: boolean;
     error?: IResponseError;
 }
 
 export function HealthcheckDetails(props: HealthcheckDetailsProps) {
-    const {issueTrees, error} = props;
+    const {issueTrees, loading, wasLoaded, error} = props;
 
     const renderContent = () => {
         if (error) {
             return <ResponseError error={error} defaultMessage={i18n('no-data')} />;
         }
 
+        if (loading && !wasLoaded) {
+            return <Loader size="m" />;
+        }
+
         if (!issueTrees || !issueTrees.length) {
             return i18n('status_message.ok');
         }

src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx

@@ -9,6 +9,7 @@ import type {IResponseError} from '../../../../../types/api/error';
 import {DiagnosticCard} from '../../../../../components/DiagnosticCard/DiagnosticCard';
 import EntityStatus from '../../../../../components/EntityStatus/EntityStatus';
 import {ResponseError} from '../../../../../components/Errors/ResponseError';
+import {Loader} from '../../../../../components/Loader';
 
 import i18n from './i18n';
 import './Healthcheck.scss';
@@ -19,17 +20,22 @@ interface HealthcheckPreviewProps {
     selfCheckResult: SelfCheckResult;
     issuesStatistics?: [StatusFlag, number][];
     loading?: boolean;
+    wasLoaded?: boolean;
     onUpdate: VoidFunction;
     error?: IResponseError;
     active?: boolean;
 }
 
 export function HealthcheckPreview(props: HealthcheckPreviewProps) {
-    const {selfCheckResult, issuesStatistics, loading, onUpdate, error, active} = props;
+    const {selfCheckResult, issuesStatistics, loading, wasLoaded, onUpdate, error, active} = props;
 
     const renderHeader = () => {
         const modifier = selfCheckResult.toLowerCase();
 
+        if (loading && !wasLoaded) {
+            return null;
+        }
+
         return (
             <div className={b('preview-header')}>
                 <div className={b('preview-title-wrapper')}>
@@ -50,6 +56,10 @@ export function HealthcheckPreview(props: HealthcheckPreviewProps) {
             return <ResponseError error={error} defaultMessage={i18n('no-data')} />;
         }
 
+        if (loading && !wasLoaded) {
+            return <Loader size="m" />;
+        }
+
         return (
             <div className={b('preview-content')}>
                 {!issuesStatistics || !issuesStatistics.length ? (

src/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricsCards.tsx

@@ -38,6 +38,7 @@ interface MetricsCardsProps {
     selfCheckResult: SelfCheckResult;
     fetchHealthcheck: VoidFunction;
     healthcheckLoading?: boolean;
+    healthCheckWasLoaded?: boolean;
     healthcheckError?: IResponseError;
 }
 
@@ -47,6 +48,7 @@ export function MetricsCards({
     selfCheckResult,
     fetchHealthcheck,
     healthcheckLoading,
+    healthCheckWasLoaded,
     healthcheckError,
 }: MetricsCardsProps) {
     const location = useLocation();
@@ -124,6 +126,7 @@ export function MetricsCards({
                     issuesStatistics={issuesStatistics}
                     onUpdate={fetchHealthcheck}
                     loading={healthcheckLoading}
+                    wasLoaded={healthCheckWasLoaded}
                     error={healthcheckError}
                     active={metricsTab === TENANT_METRICS_TABS_IDS.healthcheck}
                 />

src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx

@@ -130,15 +130,22 @@ export function TenantOverview({
                 return <TenantMemory path={tenantName} />;
             }
             case TENANT_METRICS_TABS_IDS.healthcheck: {
-                return <HealthcheckDetails issueTrees={issueTrees} error={healthcheckError} />;
+                return (
+                    <HealthcheckDetails
+                        issueTrees={issueTrees}
+                        loading={healthcheckLoading}
+                        wasLoaded={healthCheckWasLoaded}
+                        error={healthcheckError}
+                    />
+                );
             }
             default: {
                 return undefined;
             }
         }
     };
 
-    if ((tenantLoading && !tenantWasLoaded) || (healthcheckLoading && !healthCheckWasLoaded)) {
+    if (tenantLoading && !tenantWasLoaded) {
         return (
             <div className={b('loader')}>
                 <Loader size="m" />
@@ -160,6 +167,7 @@ export function TenantOverview({
                     selfCheckResult={selfCheckResult}
                     fetchHealthcheck={fetchHealthcheck}
                     healthcheckLoading={healthcheckLoading}
+                    healthCheckWasLoaded={healthCheckWasLoaded}
                     healthcheckError={healthcheckError}
                 />
             </div>