Modernization Project Complete. Updated to latest versions of frameworks.

frontend/src/shared-minimal/components/skeletons/MobileVehiclesSkeleton.tsx

@@ -0,0 +1,46 @@
+/**
+ * @ai-summary Skeleton loading component for mobile vehicles screen
+ * @ai-context React 19 Suspense fallback optimized for mobile interface
+ */
+
+import React from 'react';
+import { Skeleton } from '@mui/material';
+import { GlassCard } from '../mobile/GlassCard';
+
+export const MobileVehiclesSkeleton: React.FC = () => {
+  return (
+    <div className="space-y-4">
+      {/* Header skeleton */}
+      <div className="flex justify-between items-center mb-6">
+        <Skeleton variant="text" width={120} height={32} />
+        <Skeleton variant="circular" width={40} height={40} />
+      </div>
+
+      {/* Mobile vehicle cards skeleton */}
+      {Array.from({ length: 4 }).map((_, index) => (
+        <GlassCard key={index}>
+          <div className="flex items-center space-x-4 p-4">
+            {/* Vehicle icon */}
+            <Skeleton variant="circular" width={48} height={48} />
+            
+            <div className="flex-1 space-y-2">
+              {/* Vehicle name */}
+              <Skeleton variant="text" width="60%" height={20} />
+              {/* Vehicle details */}
+              <Skeleton variant="text" width="80%" height={16} />
+              <Skeleton variant="text" width="40%" height={16} />
+            </div>
+            
+            {/* Action button */}
+            <Skeleton variant="circular" width={32} height={32} />
+          </div>
+        </GlassCard>
+      ))}
+
+      {/* Add button skeleton */}
+      <div className="fixed bottom-20 right-4">
+        <Skeleton variant="circular" width={56} height={56} />
+      </div>
+    </div>
+  );
+};

frontend/src/shared-minimal/components/skeletons/VehicleCardSkeleton.tsx

@@ -0,0 +1,57 @@
+/**
+ * @ai-summary Skeleton loading component for individual vehicle card
+ * @ai-context React 19 Suspense fallback for vehicle card loading
+ */
+
+import React from 'react';
+import { Box, Skeleton } from '@mui/material';
+
+export const VehicleCardSkeleton: React.FC = () => {
+  return (
+    <Box sx={{ 
+      border: '1px solid', 
+      borderColor: 'divider', 
+      borderRadius: 2, 
+      p: 2,
+      height: '280px',
+      display: 'flex',
+      flexDirection: 'column'
+    }}>
+      {/* Vehicle image skeleton */}
+      <Skeleton 
+        variant="rectangular" 
+        width="100%" 
+        height={120} 
+        sx={{ mb: 2, borderRadius: 1, flexShrink: 0 }} 
+      />
+      
+      {/* Vehicle name */}
+      <Skeleton 
+        variant="text" 
+        width="80%" 
+        height={28} 
+        sx={{ mb: 1 }} 
+      />
+      
+      {/* Vehicle details */}
+      <Skeleton 
+        variant="text" 
+        width="60%" 
+        height={20} 
+        sx={{ mb: 1 }} 
+      />
+      <Skeleton 
+        variant="text" 
+        width="70%" 
+        height={20} 
+        sx={{ mb: 2, flex: 1 }} 
+      />
+      
+      {/* Action buttons */}
+      <Box sx={{ display: 'flex', gap: 1, mt: 'auto' }}>
+        <Skeleton variant="rounded" width={70} height={32} />
+        <Skeleton variant="rounded" width={70} height={32} />
+      </Box>
+    </Box>
+  );
+};

frontend/src/shared-minimal/components/skeletons/VehicleListSkeleton.tsx

@@ -0,0 +1,54 @@
+/**
+ * @ai-summary Skeleton loading component for vehicle list
+ * @ai-context React 19 Suspense fallback component for better loading UX
+ */
+
+import React from 'react';
+import { Box, Skeleton, Grid } from '@mui/material';
+
+export const VehicleListSkeleton: React.FC = () => {
+  return (
+    <Box sx={{ py: 2 }}>
+      {/* Header skeleton */}
+      <Box sx={{ 
+        display: 'flex', 
+        justifyContent: 'space-between', 
+        alignItems: 'center', 
+        mb: 4 
+      }}>
+        <Skeleton variant="text" width={200} height={40} />
+        <Skeleton variant="rounded" width={140} height={40} />
+      </Box>
+
+      {/* Vehicle cards skeleton */}
+      <Grid container spacing={3}>
+        {Array.from({ length: 6 }).map((_, index) => (
+          <Grid item xs={12} md={6} lg={4} key={index}>
+            <Box sx={{ 
+              border: '1px solid', 
+              borderColor: 'divider', 
+              borderRadius: 2, 
+              p: 2 
+            }}>
+              {/* Vehicle image skeleton */}
+              <Skeleton variant="rectangular" width="100%" height={120} sx={{ mb: 2, borderRadius: 1 }} />
+              
+              {/* Vehicle name */}
+              <Skeleton variant="text" width="80%" height={24} sx={{ mb: 1 }} />
+              
+              {/* Vehicle details */}
+              <Skeleton variant="text" width="60%" height={20} sx={{ mb: 1 }} />
+              <Skeleton variant="text" width="70%" height={20} sx={{ mb: 2 }} />
+              
+              {/* Action buttons */}
+              <Box sx={{ display: 'flex', gap: 1 }}>
+                <Skeleton variant="rounded" width={60} height={32} />
+                <Skeleton variant="rounded" width={60} height={32} />
+              </Box>
+            </Box>
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+};