Add frontend loading imporvements

frontend/src/components/layout/Sidebar/Sidebar.tsx

@@ -185,7 +185,7 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
 
   // Get subscription-aware navigation routes
   const baseNavigationRoutes = useMemo(() => getNavigationRoutes(), []);
-  const { filteredRoutes: subscriptionFilteredRoutes } = useSubscriptionAwareRoutes(baseNavigationRoutes);
+  const { filteredRoutes: subscriptionFilteredRoutes, isLoading: subscriptionLoading } = useSubscriptionAwareRoutes(baseNavigationRoutes);
 
   // Map route paths to translation keys
   const getTranslationKey = (routePath: string): string => {
@@ -845,9 +845,23 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
 
         {/* Navigation */}
         <nav className={clsx('flex-1 overflow-y-auto overflow-x-hidden', isCollapsed ? 'px-1 py-4' : 'p-4')}>
-          <ul className={clsx(isCollapsed ? 'space-y-1 flex flex-col items-center' : 'space-y-2')}>
-            {filteredItems.map(item => renderItem(item))}
-          </ul>
+          {subscriptionLoading ? (
+            /* Skeleton loading state while subscription data is loading */
+            <ul className={clsx(isCollapsed ? 'space-y-1 flex flex-col items-center' : 'space-y-2')}>
+              {[1, 2, 3, 4, 5].map(i => (
+                <li key={i} className="animate-pulse">
+                  <div className={clsx(
+                    'rounded-lg bg-[var(--bg-tertiary)]',
+                    isCollapsed ? 'h-10 w-10' : 'h-10 w-full'
+                  )} />
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <ul className={clsx(isCollapsed ? 'space-y-1 flex flex-col items-center' : 'space-y-2')}>
+              {filteredItems.map(item => renderItem(item))}
+            </ul>
+          )}
         </nav>
 
         {/* Profile section */}