Merge pull request #2035 from bluewave-labs/fix/fe/sidebar-menu-icons

Fix sidebar menu icons appearing before full expansion

src/Components/Sidebar/index.css

@@ -79,6 +79,17 @@ aside .MuiListSubheader-root {
 	transition: padding 200ms ease;
 }
 
+.sidebar-delay-fade {
+	opacity: 0;
+	visibility: hidden;
+	transition: opacity 0.3s ease;
+}
+
+aside.sidebar-ready .sidebar-delay-fade {
+	opacity: 1;
+	visibility: visible;
+}
+
 @keyframes fadeIn {
 	0% {
 		opacity: 0;

src/Components/Sidebar/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import {
 	Box,
 	Collapse,
@@ -127,6 +127,23 @@ function Sidebar() {
 	const distributedUptimeEnabled = useSelector(
 		(state) => state.ui.distributedUptimeEnabled
 	);
+	const sidebarRef = useRef(null);
+
+	useEffect(() => {
+		const el = sidebarRef.current;
+		if (!el) return;
+	
+		const TRANSITION_DURATION = 200;
+	
+		if (!collapsed) {
+			const timeout = setTimeout(() => {
+				el.classList.add("sidebar-ready");
+			}, TRANSITION_DURATION);
+			return () => clearTimeout(timeout);
+		} else {
+			el.classList.remove("sidebar-ready");
+		}
+	}, [collapsed]);	
 
 	const renderAccountMenuItems = () => {
 		let filteredAccountMenuItems = [...accountMenuItems];
@@ -196,6 +213,7 @@ function Sidebar() {
 	return (
 		<Stack
 			component="aside"
+			ref={sidebarRef}
 			className={collapsed ? "collapsed" : "expanded"}
 			/* TODO general padding should be here */
 			py={theme.spacing(6)}
@@ -725,6 +743,7 @@ function Sidebar() {
 							</Typography>
 						</Box>
 						<Stack
+							className="sidebar-delay-fade"
 							flexDirection={"row"}
 							marginLeft={"auto"}
 							columnGap={theme.spacing(2)}