Site resource conservation added, for faster loading time. Only for Admin Frontend
This commit is contained in:
@@ -1,110 +1,121 @@
|
||||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||
import { lazy, Suspense } from 'react';
|
||||
import { CartProvider } from './contexts/CartContext';
|
||||
import { AuthProvider } from './contexts/AuthContext';
|
||||
import { FoodProvider } from './contexts/FoodContext';
|
||||
import { ThemeProvider } from './contexts/ThemeContext';
|
||||
import ProtectedRoute from './components/ProtectedRoute';
|
||||
import HomeScreen from './pages/HomeScreen';
|
||||
import CategoryScreen from './pages/CategoryScreen';
|
||||
import ItemDetailScreen from './pages/ItemDetailScreen';
|
||||
import CartScreen from './pages/CartScreen';
|
||||
import CheckoutScreen from './pages/CheckoutScreen';
|
||||
import SuccessScreen from './pages/SuccessScreen';
|
||||
import MyOrdersScreen from './pages/MyOrdersScreen';
|
||||
import LoginScreen from './pages/LoginScreen';
|
||||
import ProfileScreen from './pages/ProfileScreen';
|
||||
import ChangePinScreen from './pages/ChangePinScreen';
|
||||
import StallDetailScreen from './pages/StallDetailScreen';
|
||||
import WalletScreen from './pages/WalletScreen';
|
||||
import TopUpScreen from './pages/TopUpScreen';
|
||||
import PreferencesScreen from './pages/PreferencesScreen';
|
||||
import NotFoundScreen from './pages/NotFoundScreen';
|
||||
import StockAlert from './components/StockAlert';
|
||||
import './App.css';
|
||||
|
||||
// Lazy load screens
|
||||
const HomeScreen = lazy(() => import('./pages/HomeScreen'));
|
||||
const CategoryScreen = lazy(() => import('./pages/CategoryScreen'));
|
||||
const ItemDetailScreen = lazy(() => import('./pages/ItemDetailScreen'));
|
||||
const CartScreen = lazy(() => import('./pages/CartScreen'));
|
||||
const CheckoutScreen = lazy(() => import('./pages/CheckoutScreen'));
|
||||
const SuccessScreen = lazy(() => import('./pages/SuccessScreen'));
|
||||
const MyOrdersScreen = lazy(() => import('./pages/MyOrdersScreen'));
|
||||
const LoginScreen = lazy(() => import('./pages/LoginScreen'));
|
||||
const ProfileScreen = lazy(() => import('./pages/ProfileScreen'));
|
||||
const ChangePinScreen = lazy(() => import('./pages/ChangePinScreen'));
|
||||
const StallDetailScreen = lazy(() => import('./pages/StallDetailScreen'));
|
||||
const WalletScreen = lazy(() => import('./pages/WalletScreen'));
|
||||
const TopUpScreen = lazy(() => import('./pages/TopUpScreen'));
|
||||
const PreferencesScreen = lazy(() => import('./pages/PreferencesScreen'));
|
||||
const NotFoundScreen = lazy(() => import('./pages/NotFoundScreen'));
|
||||
|
||||
const LoadingFallback = () => (
|
||||
<div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
|
||||
<div className="loading-spinner">Loading...</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<AuthProvider>
|
||||
<FoodProvider>
|
||||
<CartProvider>
|
||||
<StockAlert />
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/login" element={<LoginScreen />} />
|
||||
|
||||
<Route path="/" element={
|
||||
<ProtectedRoute>
|
||||
<HomeScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/orders" element={
|
||||
<ProtectedRoute>
|
||||
<MyOrdersScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/category/:categoryId" element={
|
||||
<ProtectedRoute>
|
||||
<CategoryScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/item/:itemId" element={
|
||||
<ProtectedRoute>
|
||||
<ItemDetailScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/stall/:id" element={
|
||||
<ProtectedRoute>
|
||||
<StallDetailScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
|
||||
<Route path="/cart" element={
|
||||
<ProtectedRoute>
|
||||
<CartScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/checkout" element={
|
||||
<ProtectedRoute>
|
||||
<CheckoutScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/success" element={
|
||||
<ProtectedRoute>
|
||||
<SuccessScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/profile" element={
|
||||
<ProtectedRoute>
|
||||
<ProfileScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/change-pin" element={
|
||||
<ProtectedRoute>
|
||||
<ChangePinScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/wallet" element={
|
||||
<ProtectedRoute>
|
||||
<WalletScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/topup" element={
|
||||
<ProtectedRoute>
|
||||
<TopUpScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/preferences" element={
|
||||
<ProtectedRoute>
|
||||
<PreferencesScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="*" element={<NotFoundScreen />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
</CartProvider>
|
||||
</FoodProvider>
|
||||
</AuthProvider>
|
||||
<StockAlert />
|
||||
<Router>
|
||||
<Suspense fallback={<LoadingFallback />}>
|
||||
<Routes>
|
||||
<Route path="/login" element={<LoginScreen />} />
|
||||
|
||||
<Route path="/" element={
|
||||
<ProtectedRoute>
|
||||
<HomeScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/orders" element={
|
||||
<ProtectedRoute>
|
||||
<MyOrdersScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/category/:categoryId" element={
|
||||
<ProtectedRoute>
|
||||
<CategoryScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/item/:itemId" element={
|
||||
<ProtectedRoute>
|
||||
<ItemDetailScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/stall/:id" element={
|
||||
<ProtectedRoute>
|
||||
<StallDetailScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
|
||||
<Route path="/cart" element={
|
||||
<ProtectedRoute>
|
||||
<CartScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/checkout" element={
|
||||
<ProtectedRoute>
|
||||
<CheckoutScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/success" element={
|
||||
<ProtectedRoute>
|
||||
<SuccessScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/profile" element={
|
||||
<ProtectedRoute>
|
||||
<ProfileScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/change-pin" element={
|
||||
<ProtectedRoute>
|
||||
<ChangePinScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/wallet" element={
|
||||
<ProtectedRoute>
|
||||
<WalletScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/topup" element={
|
||||
<ProtectedRoute>
|
||||
<TopUpScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="/preferences" element={
|
||||
<ProtectedRoute>
|
||||
<PreferencesScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
<Route path="*" element={<NotFoundScreen />} />
|
||||
</Routes>
|
||||
</Suspense>
|
||||
</Router>
|
||||
</CartProvider>
|
||||
</FoodProvider>
|
||||
</AuthProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
PlusCircle,
|
||||
CreditCard
|
||||
} from 'lucide-react';
|
||||
import tokenImage from '../assets/display_ritz.png';
|
||||
import tokenImage from '../assets/display_ritz.webp';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import Header from '../components/Header';
|
||||
import StockConflictModal from '../components/StockConflictModal';
|
||||
|
||||
@@ -9,7 +9,7 @@ import FeedbackModal from '../components/FeedbackModal';
|
||||
import { useFood } from '../contexts/FoodContext';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import walletIcon from '../assets/front.png';
|
||||
import walletIcon from '../assets/front.webp';
|
||||
import './HomeScreen.css';
|
||||
|
||||
const HomeScreen: React.FC = () => {
|
||||
|
||||
Reference in New Issue
Block a user