From 22be9fb9e646be97220a046362ed9d15c1f65962 Mon Sep 17 00:00:00 2001
From: Ishpaul Singh <104348397+ishpaul777@users.noreply.github.com>
Date: Fri, 7 Jun 2024 13:07:21 +0000
Subject: [PATCH] fix: prevent empty dashboard from displaying before sidebar
 renders

---
 studio/src/components/GlobalNav/Sidebar.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/studio/src/components/GlobalNav/Sidebar.js b/studio/src/components/GlobalNav/Sidebar.js
index 2cbfb266..e42015eb 100644
--- 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