Merge pull request #934 from factly/fix/933

studio: prevent empty dashboard from displaying before sidebar renders
factly · Jun 27, 2024 · c59a08f · c59a08f
2 parents 9c46498 + 22be9fb
commit c59a08f
Showing 1 changed file with 13 additions and 4 deletions.
diff --git a/studio/src/components/GlobalNav/Sidebar.js b/studio/src/components/GlobalNav/Sidebar.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Link, useLocation } from 'react-router-dom';
-import { Layout, Menu, Popover, List, Avatar, Button } from 'antd';
+import { Layout, Menu, Popover, List, Avatar, Button, Skeleton } from 'antd';
 import routes, { sidebarMenu } from '../../config/routesConfig';
 import _ from 'lodash';
 import { setCollapse } from './../../actions/sidebar';
@@ -46,9 +46,6 @@ function Sidebar({ superOrg, permission, orgs, loading, applications, services,
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
-  if (loading) {
-    return null;
-  }
   let resource = [
     'home',
     'dashboard',
@@ -244,6 +241,18 @@ function Sidebar({ superOrg, permission, orgs, loading, applications, services,
         >
           {sidebarMenu.map((menu, index) => {
             const { Icon } = menu;
+            if (loading) {
+              return (
+                <Skeleton
+                  paragraph={false}
+                  loading={loading}
+                  style={{ padding: '12px' }}
+                  active
+                  round
+                  avatar={{ shape: 'circle' }}
+                />
+              );
+            }
             return menu.title === 'CORE' && !showCoreMenu
               ? null
               : !menu.isService