Sidebar Flickering/Re-rendering after refresh in browser

Question

This is the UserSidebar

import React, { useState, useEffect } from 'react';
import { Layout, Menu } from 'antd';
import {
  DashboardOutlined,
  AppstoreOutlined,
  HistoryOutlined,
  QrcodeOutlined,
  LogoutOutlined,
  MenuOutlined,
} from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import { useUserAuthStore } from "../../store/user/useAuth";
import Cookies from 'js-cookie'; // Import js-cookie

const { Sider } = Layout;

const userItems = [
  { label: 'Dashboard', key: '/user/dashboard', icon:  },
  { label: 'Inventory', key: '/user/inventory', icon:  },
  { label: 'History', key: '/user/history', icon:  },
  { label: 'QR Code', key: '/user/qrcode', icon:  },
];

const UserSidebar = () => {
  const [collapsed, setCollapsed] = useState(() => {
    const savedCollapsed = localStorage.getItem('user-sider-collapsed');
    return savedCollapsed ? JSON.parse(savedCollapsed) : false;
  });
  const [current, setCurrent] = useState('/user/dashboard');
  const navigate = useNavigate();
  const location = useLocation();
  const { reset } = useUserAuthStore();

  const onClick = (e) => {
    if (e.key === 'logout') {
      reset();
      sessionStorage.clear();
      localStorage.clear();
      Cookies.remove('authToken'); // Remove the auth token cookie
      navigate('/login', { replace: true });
    } else {
      navigate(e.key, { replace: true }); // Use replace: true to avoid stacking history
      setCurrent(e.key);
    }
  };

  const toggleCollapse = () => setCollapsed(!collapsed);

  useEffect(() => {
    localStorage.setItem('user-sider-collapsed', JSON.stringify(collapsed));
  }, [collapsed]);

  useEffect(() => {
    setCurrent(location.pathname);
  }, [location.pathname]);

  const items = [
    ...userItems,
    {
      key: 'logout',
      label: 'Logout',
      icon: ,
      style: { position: 'absolute', bottom: 50, width: '96%' }
    },
  ];

  return (
    
      
        
          
            
            {!collapsed && MIMS}
          
          
            
          
        
        
      
    
  );
};

export default UserSidebar;

import React, { useState, useEffect } from 'react';
import { Layout, Spin } from 'antd'; 
import { Outlet } from 'react-router-dom';
import { HeaderBar, AdminSidebar, UserSidebar } from '../components';
import { useAdminAuthStore } from '../store/admin/useAuth';
import { useUserAuthStore } from '../store/user/useAuth';

const MainLayout = () => {
  const [loading, setLoading] = useState(true); // State to manage loading
  const adminAuth = useAdminAuthStore(); // Admin auth store
  const userAuth = useUserAuthStore(); // User auth store

  // Check if user is admin or regular user (since Auth component handles authentication)
  const isAdmin = adminAuth.token && adminAuth.userData; 
  const isUser = userAuth.token && userAuth.userData; 

  useEffect(() => {
    // Check if token exists to set loading state
    const delay = setTimeout(() => {
      setLoading(false); 
    }, 100); // Short delay for smoother UI experience

    return () => clearTimeout(delay);
  }, [adminAuth.token, userAuth.token]);

  if (loading) {
    return (
      
        
        
        Loading...
      
    );
  }

  return (
    
      {/* Render only the appropriate sidebar */}
      {isAdmin && }
      {isUser && !isAdmin && }

      
        
        
           {/* Main content rendered here */}
        
      
    
  );
};

export default MainLayout;

I have an issue of flickering or re-rendering in my website when I refresh in my Dashboard, it seems like the AdminSidebar and UserSiderbar role authentication has an issue in re-rendering of the front-end.

I already tried fixing the authentication logic and function, but still the flickering remains, when I tried to use useMemo, it does fix it but just for a moment, after refreshing again the website still flickers but now it is random because of the useMemo.

This is my AdminSidebar as an example:

import React, { useState, useEffect } from 'react';
import { Layout, Menu } from 'antd';
import {
  DashboardOutlined,
  AppstoreOutlined,
  HistoryOutlined,
  QrcodeOutlined,
  UserOutlined,
  LogoutOutlined,
  MenuOutlined,
} from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import { useAdminAuthStore } from "../../store/admin/useAuth";
import Cookies from 'js-cookie'; // Import js-cookie

const { Sider } = Layout;

const adminItems = [
  { label: 'Dashboard', key: '/admin/dashboard', icon:  },
  { label: 'Inventory', key: '/admin/inventory', icon:  },
  { label: 'History', key: '/admin/history', icon:  },
  { label: 'QR Code', key: '/admin/qrcode', icon:  },
  { label: 'Users', key: '/admin/users', icon:  },
];

const AdminSidebar = () => {
  const [collapsed, setCollapsed] = useState(() => {
    const savedCollapsed = localStorage.getItem('admin-sider-collapsed');
    return savedCollapsed ? JSON.parse(savedCollapsed) : false;
  });
  const [current, setCurrent] = useState('/admin/dashboard');
  const navigate = useNavigate();
  const location = useLocation();
  const { reset } = useAdminAuthStore();

  const onClick = (e) => {
    if (e.key === 'logout') {
      reset();
      sessionStorage.clear();
      localStorage.clear();
      Cookies.remove('authToken'); // Remove the auth token cookie
      navigate('/login', { replace: true });
    } else {
      navigate(e.key, { replace: true }); // Use replace: true to avoid stacking history
      setCurrent(e.key);
    }
  };

  const toggleCollapse = () => setCollapsed(!collapsed);

  useEffect(() => {
    localStorage.setItem('admin-sider-collapsed', JSON.stringify(collapsed));
  }, [collapsed]);

  useEffect(() => {
    setCurrent(location.pathname);
  }, [location.pathname]);

  const items = [
    ...adminItems,
    {
      key: 'logout',
      label: 'Logout',
      icon: ,
      style: { position: 'absolute', bottom: 50, width: '96%' }
    },
  ];

  return (
    
      
        
          
            
            {!collapsed && MIMS}
          
          
            
          
        
        
      
    
  );
};

export default AdminSidebar;

Sidebar Flickering/Re-rendering after refresh in browser

Answers (0)

Related Questions