fix(ClusterOverview): loading state (#2250)

Author: Raubzeug

src/containers/Cluster/ClusterOverview/ClusterOverview.scss

@@ -67,4 +67,9 @@
         min-width: 280px;
         height: 132px;
     }
+
+    &__card_collapsed {
+        min-width: 120px;
+        height: 28px;
+    }
 }

src/containers/Cluster/ClusterOverview/ClusterOverview.tsx

@@ -91,7 +91,7 @@ function ClusterDashboard({collapsed, ...props}: ClusterDashboardProps) {
 
 function ClusterDoughnuts({cluster, groupStats = {}, loading, collapsed}: ClusterOverviewProps) {
     if (loading) {
-        return <ClusterDashboardSkeleton />;
+        return <ClusterDashboardSkeleton collapsed={collapsed} />;
     }
     const metricsCards = [];
     if (isClusterInfoV2(cluster)) {

src/containers/Cluster/ClusterOverview/components/ClusterMetricsCard.tsx

@@ -28,9 +28,13 @@ interface ClusterMetricsCommonCardProps {
     collapsed?: boolean;
 }
 
-export function ClusterMetricsCard({children, className}: ClusterMetricsCommonCardProps) {
+export function ClusterMetricsCard({
+    children,
+    className,
+    collapsed,
+}: ClusterMetricsCommonCardProps) {
     return (
-        <Flex gap="6" alignItems="center" className={b('card', className)}>
+        <Flex gap="6" alignItems="center" className={b('card', {collapsed}, className)}>
             {children}
         </Flex>
     );
@@ -70,20 +74,24 @@ export function ClusterMetricsCardContent({
     );
 }
 
-function ClusterMetricsCardSkeleton() {
+interface ClusterMetricsCardSkeletonProps {
+    collapsed?: boolean;
+}
+
+function ClusterMetricsCardSkeleton({collapsed}: ClusterMetricsCardSkeletonProps) {
     return (
-        <ClusterMetricsCard className={b('skeleton-wrapper')}>
+        <ClusterMetricsCard className={b('skeleton-wrapper')} collapsed={collapsed}>
             <Skeleton className={b('skeleton')} />
         </ClusterMetricsCard>
     );
 }
 
-export function ClusterDashboardSkeleton() {
+export function ClusterDashboardSkeleton({collapsed}: ClusterMetricsCardSkeletonProps) {
     return (
         <React.Fragment>
-            <ClusterMetricsCardSkeleton />
-            <ClusterMetricsCardSkeleton />
-            <ClusterMetricsCardSkeleton />
+            <ClusterMetricsCardSkeleton collapsed={collapsed} />
+            <ClusterMetricsCardSkeleton collapsed={collapsed} />
+            <ClusterMetricsCardSkeleton collapsed={collapsed} />
         </React.Fragment>
     );
 }