"use client";
import { useEffect, useState } from "react";
import { t } from "@/utils/translation";
// Inlined (not fetched via ThemedSvg) on purpose: ThemedSvg fetch()es the raw
// .svg file over the network to recolor it, which is exactly the one thing
// that can't work on the screen shown when the network is DOWN — the icon
// itself failed to load with net::ERR_INTERNET_DISCONNECTED. Baked-in markup
// with the accent pre-swapped to the theme var needs zero network.
const NO_INTERNET_SVG = ``;
// Full-screen overlay shown when the browser goes offline. Listens to the
// window online/offline events (and seeds from navigator.onLine on mount).
// Mounted once globally in Layout so it covers every route.
const OfflineOverlay = () => {
const [offline, setOffline] = useState(false);
useEffect(() => {
// Seed from the current status (navigator.onLine is only reliable client-side).
// Intentional sync setState: mirrors an external browser API on mount.
if (typeof navigator !== "undefined" && navigator.onLine === false) {
// eslint-disable-next-line react-hooks/set-state-in-effect
setOffline(true);
}
const goOffline = () => setOffline(true);
const goOnline = () => setOffline(false);
window.addEventListener("offline", goOffline);
window.addEventListener("online", goOnline);
return () => {
window.removeEventListener("offline", goOffline);
window.removeEventListener("online", goOnline);
};
}, []);
if (!offline) return null;
return (
{t("no_internet_connection") || "No Internet Connection"}
{t("check_your_connection") ||
"Please check your network and try again."}