some change

Author: Aayushajs

public/no-internet.json

@@ -39,6 +39,45 @@ body { background: #13131374; }
     padding: 40px 20px;
   }
 }
+.offline-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #f0f2f5;
+  text-align: center;
+}
+
+.offline-container p {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #333;
+  margin-top: 1rem;
+}
+
+.offline-container span {
+  font-size: 1rem;
+  color: #666;
+  margin-top: 0.5rem;
+}
+
+.reload-button {
+  margin-top: 1.5rem;
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #fff;
+  background-color: #007bff;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.reload-button:hover {
+  background-color: #0056b3;
+}
 
 
 

src/App.css

@@ -1,5 +1,5 @@
 import { API_BASE_URL } from "./api";
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Dashboard from "./components/Dashboard/Dashboard";
 import Login from "./components/Login";
@@ -20,6 +20,7 @@ import DescriptionDashboard from "./components/DescriptionDetailPage";
 import DescriptionBill from "./components/MedicalDescriptions";
 import DoctorDashboard from "./components/Doctor/DoctorDashboard";
 import AppointmentDetail from "./components/Doctor/AppointmentDetail"; // new detail page
+import OfflineAnimation from "./components/OfflineAnimation";
 
 const App = () => {
   const { 
@@ -33,6 +34,28 @@ const App = () => {
     setDoctor
   } = useContext(Context);
 
+  const [isOnline, setIsOnline] = useState(navigator.onLine);
+
+  useEffect(() => {
+    const handleOnline = () => {
+      setIsOnline(true);
+      // Reload the page to ensure everything is re-initialized correctly
+      window.location.reload();
+    };
+    const handleOffline = () => {
+      setIsOnline(false);
+    };
+
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+
+    // Cleanup listeners on component unmount
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, []);
+
   useEffect(() => {
     const fetchAdmin = async () => {
       try {
@@ -62,9 +85,15 @@ const App = () => {
       }
     };
 
-    fetchAdmin();
-    fetchDoctor();
-  }, [isAuthenticated, isDoctorAuthenticated]);
+    if (isOnline) {
+      fetchAdmin();
+      fetchDoctor();
+    }
+  }, [isOnline, isAuthenticated, isDoctorAuthenticated, setAdmin, setDoctor, setIsAuthenticated, setIsDoctorAuthenticated]);
+
+  if (!isOnline) {
+    return <OfflineAnimation />;
+  }
 
   return (
     <Router>

src/App.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Lottie from 'lottie-react';
+import noInternetAnimation from '../../public/no-internet.json';
+
+const OfflineAnimation = () => {
+  const handleReload = () => {
+    window.location.reload();
+  };
+
+  return (
+    <div className="offline-container overflow-hidden">
+      <Lottie animationData={noInternetAnimation} loop={true} style={{ width: 300, height: 300 , overflow: "hidden" }} />
+      <p>No Internet Connection</p>
+      <span>Please check your connection and try again.</span>
+      <button onClick={handleReload} className="reload-button">
+        Try Again
+      </button>
+    </div>
+  );
+};
+
+export default OfflineAnimation;