done loader changes

src/application/modules/admin/components/ModuleEnvironments.tsx

@@ -3,6 +3,7 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { ArrowLeft, Plus, Edit, Trash2, Check, X } from 'lucide-react';
 import { adminModuleApi } from '../AdminModuleApi';
 import type { ModuleEnvironment, Module } from '../AdminModuleTypes';
+import Loader from '../../../../components/custom/CustomLoader';
 import EnvironmentForm from './EnvironmentForm';
 import { CustomConfirmationModal } from '../../../../components/custom';
 
@@ -63,12 +64,10 @@ const ModuleEnvironments = () => {
         }
     };
 
-    if (loading) {
-        return <div className="p-6">Loading...</div>;
-    }
+
 
     return (
-        <div className="p-6 space-y-6">
+        <div className="space-y-6">
             <div className="flex items-center gap-4">
                 <button
                     onClick={() => navigate('/admin/modules')}
@@ -76,23 +75,30 @@ const ModuleEnvironments = () => {
                 >
                     <ArrowLeft size={20} />
                 </button>
-                <div className="flex-1">
-                    <h1 className="text-3xl font-bold text-(--text-primary)">
-                        {module?.module_name} - Environments
+                <div className="flex flex-col gap-1">
+                    <h1 className="text-2xl font-bold text-(--text-primary)">
+                        {module?.module_name || 'Loading...'} - Environments
                     </h1>
-                    <p className="text-(--text-secondary) mt-1">Configure environment-specific settings</p>
+                    <p className="text-sm text-(--text-secondary)">Configure environment-specific settings</p>
+                </div>
+                <div className="ml-auto">
+                    <button
+                        onClick={() => { setSelectedEnv(null); setShowForm(true); }}
+                        className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+                    >
+                        <Plus size={20} />
+                        Add Environment
+                    </button>
                 </div>
-                <button
-                    onClick={() => { setSelectedEnv(null); setShowForm(true); }}
-                    className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
-                >
-                    <Plus size={20} />
-                    Add Environment
-                </button>
             </div>
 
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-                {environments.map((env) => (
+            {loading ? (
+                <div className="p-12 flex flex-col items-center justify-center min-h-[300px]">
+                    <Loader size="md" />
+                </div>
+            ) : (
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    {environments.map((env) => (
                     <div key={env.id} className="bg-(--card-bg) border border-(--card-border) rounded-lg p-6 space-y-4">
                         <div className="flex items-start justify-between">
                             <div>
@@ -159,9 +165,10 @@ const ModuleEnvironments = () => {
                         </div>
                     </div>
                 ))}
-            </div>
+                </div>
+            )}
 
-            {environments.length === 0 && (
+            {environments.length === 0 && !loading && (
                 <div className="bg-(--card-bg) border border-(--card-border) rounded-lg p-12 text-center">
                     <p className="text-(--text-secondary) mb-4">No environments configured</p>
                     <button

src/application/modules/admin/components/ModulePermissions.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { ArrowLeft, RefreshCw, Shield } from 'lucide-react';
 import { useModuleApi } from '../hooks/useModuleApi';
+import Loader from '../../../../components/custom/CustomLoader';
 import type { ModulePermission, Module } from '../AdminModuleTypes';
 import CustomButton from '../../../../components/custom/CustomButton';
 import { NodeGroupAccessViewer } from '../../../roles/components/NodeGroupAccessViewer';
@@ -43,9 +44,7 @@ const ModulePermissions = () => {
         setSyncing(false);
     };
 
-    if (loading && !module) {
-        return <div className="p-6">Loading...</div>;
-    }
+  
 
     const viewerAccesses: RoleAccess[] = permissions.map(p => ({
         id: p.id,
@@ -56,7 +55,7 @@ const ModulePermissions = () => {
     }));
 
     return (
-        <div className="p-6 space-y-6">
+        <div className="space-y-6">
             <div className="flex items-center gap-4">
                 <button
                     onClick={() => navigate('/admin/modules')}
@@ -64,22 +63,28 @@ const ModulePermissions = () => {
                 >
                     <ArrowLeft size={20} />
                 </button>
-                <div className="flex-1">
-                    <h1 className="text-3xl font-bold text-(--text-primary)">
-                        {module?.module_name} - Permissions
+                <div className="flex flex-col gap-1">
+                    <h1 className="text-2xl font-bold text-(--text-primary)">
+                        {module?.module_name || 'Loading...'} - Permissions
                     </h1>
-                    <p className="text-(--text-secondary) mt-1">View and sync permissions from module</p>
+                    <p className="text-sm text-(--text-secondary)">View and sync permissions from module</p>
+                </div>
+                <div className="ml-auto">
+                    <CustomButton
+                        onClick={handleSync}
+                        loading={syncing}
+                        leftIcon={!syncing && <RefreshCw size={20} />}
+                    >
+                        {syncing ? 'Syncing...' : 'Sync Permissions'}
+                    </CustomButton>
                 </div>
-                <CustomButton
-                    onClick={handleSync}
-                    loading={syncing}
-                    leftIcon={!syncing && <RefreshCw size={20} />}
-                >
-                    {syncing ? 'Syncing...' : 'Sync Permissions'}
-                </CustomButton>
             </div>
 
-            {permissions.length > 0 ? (
+            {loading ? (
+                <div className=" p-12 flex flex-col items-center justify-center min-h-[300px]">
+                    <Loader size="md" />
+                </div>
+            ) : permissions.length > 0 ? (
                 <div className="bg-(--card-bg) border border-(--card-border) rounded-lg p-6">
                     <NodeGroupAccessViewer accesses={viewerAccesses} />
                 </div>

src/application/modules/admin/components/TenantModuleAssignment.tsx

@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom';
 import { adminModuleApi } from '../AdminModuleApi';
 import type { TenantModule, Module } from '../AdminModuleTypes';
 import { Plus, Trash2 } from 'lucide-react';
+import Loader from '../../../../components/custom/CustomLoader';
 
 const TenantModuleAssignment = () => {
     const { tenantId } = useParams<{ tenantId: string }>();
@@ -85,12 +86,15 @@ const TenantModuleAssignment = () => {
         }
     };
 
-    if (loading) return <div className="p-6">Loading...</div>;
+
 
     return (
-        <div className="p-6 space-y-6">
+        <div className="space-y-6">
             <div className="flex justify-between items-center">
-                <h1 className="text-3xl font-bold text-(--text-primary)">Tenant Modules</h1>
+                <div className="flex flex-col gap-1">
+                    <h1 className="text-2xl font-bold text-(--text-primary)">Tenant Modules</h1>
+                    <p className="text-sm text-(--text-secondary)">Manage module assignments for this tenant</p>
+                </div>
                 <button
                     onClick={() => setShowAssignDialog(true)}
                     disabled={availableModules.length === 0}
@@ -101,8 +105,14 @@ const TenantModuleAssignment = () => {
                 </button>
             </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                {assignedModules.map((tm) => (
+            {loading ? (
+                <div className="bg-(--card-bg) border border-(--card-border) rounded-lg p-12 flex flex-col items-center justify-center min-h-[300px]">
+                    <Loader size="lg" />
+                    <p className="mt-4 text-(--text-secondary)">Loading assignments...</p>
+                </div>
+            ) : (
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    {assignedModules.map((tm) => (
                     <div key={tm.id} className="bg-(--card-bg) border border-(--card-border) rounded-lg p-6 space-y-4">
                         <div className="flex items-start justify-between">
                             <div className="flex items-center gap-3">
@@ -140,7 +150,8 @@ const TenantModuleAssignment = () => {
                         </div>
                     </div>
                 ))}
-            </div>
+                </div>
+            )}
 
             {showAssignDialog && (
                 <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">