fix: add loading skeleton for dashboard reloading

kubeshop · Jan 12, 2023 · 43327a9 · 43327a9
1 parent 7c13c6e
commit 43327a9
Showing 1 changed file with 6 additions and 0 deletions.
diff --git a/src/components/organisms/PaneManager/PaneManagerSplitView.tsx b/src/components/organisms/PaneManager/PaneManagerSplitView.tsx
@@ -1,5 +1,7 @@
 import React, {Suspense, useCallback} from 'react';
 
+import {Skeleton} from 'antd';
+
 import {GUTTER_SPLIT_VIEW_PANE_WIDTH, MIN_SPLIT_VIEW_PANE_WIDTH} from '@constants/constants';
 
 import {useAppDispatch, useAppSelector} from '@redux/hooks';
@@ -30,6 +32,7 @@ const SearchPane = React.lazy(() => import('@organisms/SearchPane'));
 const PaneManagerSplitView: React.FC = () => {
   const dispatch = useAppDispatch();
 
+  const isPreviewLoading = useAppSelector(state => state.main.previewLoader.isLoading);
   const layout = useAppSelector(state => state.ui.paneConfiguration);
   const leftActiveMenu = useAppSelector(state =>
     state.ui.leftMenu.isActive ? state.ui.leftMenu.selection : undefined
@@ -52,6 +55,9 @@ const PaneManagerSplitView: React.FC = () => {
   );
 
   if (!isInClusterMode && leftActiveMenu === 'dashboard') {
+    if (isPreviewLoading) {
+      return <Skeleton active style={{margin: 20}} />;
+    }
     return <EmptyDashboard />;
   }