feat: Enhance UX with animations, loaders, fixes, and doc updates

- Animations: Added global page transitions and smooth sidebar toggle
- Loaders: Implemented branded Loader component and page loading states
- Fixes: Resolved hook order violations in Maps/Dashboard; fixed Layout import
- Docs: Updated README with correct demo credentials and feature list

src/pages/Maps.jsx

@@ -8,6 +8,7 @@ import { SpotlightCard } from '../components/SpotlightCard';
 import { useTheme } from '../context/ThemeContext';
 import { logger } from '../utils/logger';
 import { toast } from 'sonner';
+import Loader from '../components/Loader';
 
 // Fix for default Leaflet marker icons not showing up
 import L from 'leaflet';
@@ -436,6 +437,15 @@ const InputGroup = ({ label, children }) => (
 function Maps() {
     const { properties, setProperties, updatePropertyStatus } = useMockStore();
     const { user } = useAuth();
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        // Simulate initial map load
+        const timer = setTimeout(() => setIsLoading(false), 1000);
+        return () => clearTimeout(timer);
+    }, []);
+
+
 
     // Selection State
     const [selectedPropertyId, setSelectedPropertyId] = useState(null);
@@ -592,6 +602,8 @@ function Maps() {
         }
     };
 
+    if (isLoading) return <Loader fullScreen text="Loading Territory Map..." />;
+
     return (
         <div className="w-full h-full relative bg-zinc-50 dark:bg-black overflow-hidden transition-colors duration-300" style={{ height: "calc(100vh - 0px)" }}>
             <MapView