@abcagency/hc-ui-components 1.7.1 → 1.7.3

package/src/components/modules/skeleton/map-skeleton.js

@@ -2,8 +2,8 @@ import React from 'react';
 import Grid from '~/components/modules/grid';
 
 /**
- * Skeleton component that renders the map interface structure immediately
- * This provides the layout and size before data/maps are loaded
+ * Simple skeleton component that renders the basic structure
+ * Shows placeholder boxes for filters, list, and map
  */
 const MapSkeleton = ({ 
 	hideFilters = false, 
@@ -21,141 +21,31 @@ const MapSkeleton = ({
 				columns={hideFilters ? 'hc-grid-cols-1' : 'md:hc-grid-cols-[1fr_2.5fr] lg:hc-grid-cols-[1fr_3.5fr]'}
 				gap='hc-gap-0'
 				autoRows={false}
-				className={'hc-items-stretch hc-divide-x hc-divide-gray-200'}
+				className={'hc-items-stretch hc-divide-x hc-divide-uiAccent/20'}
 			>
+				{/* Filter Column */}
 				{!hideFilters && (
-					<Grid.Item className='hc-bg-gray-100'>
-						<FilterSkeleton />
-					</Grid.Item>
+					<Grid.Item className='hc-bg-gray-50 hc-animate-pulse hc-hidden md:hc-block' />
 				)}
-				<Grid.Item className='hc-bg-white'>
-					<MapListSkeleton showMap={showMap} isMapOnTop={isMapOnTop} />
+				
+				{/* Main Content Area */}
+				<Grid.Item>
+					{showMap ? (
+						<div className={`hc-h-full hc-flex ${isMapOnTop ? 'hc-flex-col' : 'hc-flex-col md:hc-flex-row'}`}>
+							{/* List Box */}
+							<div className={`hc-flex-1 hc-bg-white hc-animate-pulse ${isMapOnTop ? 'hc-order-2' : 'hc-order-2 md:hc-order-1'}`} />
+							
+							{/* Map Box */}
+							<div className={`hc-flex-1 hc-bg-gray-100 hc-animate-pulse ${isMapOnTop ? 'hc-order-1' : 'hc-order-1 md:hc-order-2'}`} style={{ minHeight: '300px' }} />
+						</div>
+					) : (
+						/* Just List Box */
+						<div className="hc-h-full hc-bg-white hc-animate-pulse" />
+					)}
 				</Grid.Item>
 			</Grid>
 		</div>
 	);
 };
 
-/**
- * Skeleton for the filter section
- */
-const FilterSkeleton = () => {
-	return (
-		<div className="hc-p-4 hc-space-y-4 hc-h-full hc-hidden md:hc-block hc-overflow-auto">
-			{/* Search input skeleton */}
-			<div className="hc-h-10 hc-bg-gray-200 hc-rounded-md hc-animate-pulse" />
-			
-			{/* Commute filter skeleton */}
-			<div className="hc-h-10 hc-bg-gray-200 hc-rounded-md hc-animate-pulse hc-mb-4" />
-			
-			{/* Filter sections skeleton */}
-			{[1, 2, 3, 4, 5].map((i) => (
-				<div key={i} className="hc-space-y-2 hc-pb-3 hc-border-b hc-border-gray-200 last:hc-border-0">
-					<div className="hc-h-8 hc-bg-gray-300 hc-rounded hc-animate-pulse" style={{ width: '60%' }} />
-					<div className="hc-space-y-1.5 hc-pl-2 hc-pt-1">
-						<div className="hc-h-5 hc-bg-gray-200 hc-rounded hc-animate-pulse" style={{ width: '90%' }} />
-						<div className="hc-h-5 hc-bg-gray-200 hc-rounded hc-animate-pulse" style={{ width: '85%' }} />
-						<div className="hc-h-5 hc-bg-gray-200 hc-rounded hc-animate-pulse" style={{ width: '75%' }} />
-						{i <= 2 && <div className="hc-h-5 hc-bg-gray-200 hc-rounded hc-animate-pulse" style={{ width: '80%' }} />}
-					</div>
-				</div>
-			))}
-		</div>
-	);
-};
-
-/**
- * Skeleton for the map and list section
- */
-const MapListSkeleton = ({ showMap, isMapOnTop }) => {
-	if (!showMap) {
-		// List only view
-		return (
-			<div className="hc-h-full hc-flex hc-flex-col">
-				<ListSkeleton />
-			</div>
-		);
-	}
-
-	// Map + List view
-	return (
-		<div className={`hc-h-full hc-flex ${isMapOnTop ? 'hc-flex-col' : 'hc-flex-col md:hc-flex-row'}`}>
-			{isMapOnTop ? (
-				<>
-					<div className="hc-flex-1 hc-bg-gray-100 hc-animate-pulse" style={{ minHeight: '300px' }}>
-						<div className="hc-h-full hc-flex hc-items-center hc-justify-center">
-							<div className="hc-text-gray-400">
-								<svg className="hc-w-12 hc-h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
-								</svg>
-							</div>
-						</div>
-					</div>
-					<div className="hc-flex-1">
-						<ListSkeleton />
-					</div>
-				</>
-			) : (
-				<>
-					<div className="hc-flex-1 hc-order-2 md:hc-order-1">
-						<ListSkeleton />
-					</div>
-					<div className="hc-flex-1 hc-bg-gray-100 hc-animate-pulse hc-order-1 md:hc-order-2" style={{ minHeight: '300px' }}>
-						<div className="hc-h-full hc-flex hc-items-center hc-justify-center">
-							<div className="hc-text-gray-400">
-								<svg className="hc-w-12 hc-h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
-								</svg>
-							</div>
-						</div>
-					</div>
-				</>
-			)}
-		</div>
-	);
-};
-
-/**
- * Skeleton for the list section
- */
-const ListSkeleton = () => {
-	return (
-		<div className="hc-h-full hc-flex hc-flex-col hc-bg-white">
-			{/* Header with sort */}
-			<div className="hc-p-4 hc-border-b hc-border-gray-200 hc-bg-gray-50/50">
-				<div className="hc-flex hc-items-center hc-justify-between hc-gap-4">
-					<div className="hc-h-5 hc-w-32 hc-bg-gray-200 hc-rounded hc-animate-pulse" />
-					<div className="hc-h-9 hc-w-48 hc-bg-gray-200 hc-rounded hc-animate-pulse" />
-				</div>
-			</div>
-			
-			{/* List items */}
-			<div className="hc-flex-1 hc-overflow-auto hc-p-3 md:hc-p-4 hc-space-y-2">
-				{[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
-					<div key={i} className="hc-border hc-border-gray-200 hc-rounded-lg hc-p-4 hc-space-y-3 hc-bg-white">
-						{/* Title and company */}
-						<div className="hc-space-y-2">
-							<div className="hc-h-6 hc-bg-gray-300 hc-rounded hc-animate-pulse" style={{ width: `${70 + (i % 3) * 10}%` }} />
-							<div className="hc-h-4 hc-bg-gray-200 hc-rounded hc-animate-pulse" style={{ width: `${45 + (i % 4) * 8}%` }} />
-						</div>
-						
-						{/* Tags/badges */}
-						<div className="hc-flex hc-gap-2 hc-flex-wrap">
-							<div className="hc-h-6 hc-w-20 hc-bg-gray-200 hc-rounded-full hc-animate-pulse" />
-							<div className="hc-h-6 hc-w-24 hc-bg-gray-200 hc-rounded-full hc-animate-pulse" />
-							{i % 2 === 0 && <div className="hc-h-6 hc-w-16 hc-bg-gray-200 hc-rounded-full hc-animate-pulse" />}
-						</div>
-						
-						{/* Additional info */}
-						<div className="hc-flex hc-gap-3 hc-items-center">
-							<div className="hc-h-4 hc-w-24 hc-bg-gray-200 hc-rounded hc-animate-pulse" />
-							<div className="hc-h-4 hc-w-28 hc-bg-gray-200 hc-rounded hc-animate-pulse" />
-						</div>
-					</div>
-				))}
-			</div>
-		</div>
-	);
-};
-
 export default MapSkeleton;