diff --git a/src/components/TableToolbar/LoadedRowsStatus.tsx b/src/components/TableToolbar/LoadedRowsStatus.tsx index cf0499bec..f216e80f1 100644 --- a/src/components/TableToolbar/LoadedRowsStatus.tsx +++ b/src/components/TableToolbar/LoadedRowsStatus.tsx @@ -12,6 +12,7 @@ import { serverDocCountAtom, } from "@src/atoms/tableScope"; import { spreadSx } from "@src/utils/ui"; +import useOffline from "@src/hooks/useOffline"; const StatusText = forwardRef(function StatusText( props: TypographyProps, @@ -77,13 +78,8 @@ function LoadedRowsStatus() { } export default function SuspendedLoadedRowsStatus() { - if (navigator.onLine) { - return ( - {loadingIcon}Loading…}> - - - ); - } else { + const isOffline = useOffline(); + if (isOffline) { return ( @@ -92,5 +88,11 @@ export default function SuspendedLoadedRowsStatus() { ); + } else { + return ( + {loadingIcon}Loading…}> + + + ); } } diff --git a/src/hooks/useOffline.ts b/src/hooks/useOffline.ts index ad5cb1995..5dd9ffd5a 100644 --- a/src/hooks/useOffline.ts +++ b/src/hooks/useOffline.ts @@ -5,10 +5,24 @@ export default function useOffline() { const handleOffline = () => setIsOffline(true); const handleOnline = () => setIsOffline(false); + const checkOnlineStatus = async () => { + try { + const res = await fetch("https://httpbin.org/get", { cache: "no-store" }); + if (res.status >= 200 && res.status < 300) { + handleOnline(); + } else { + handleOffline(); + } + } catch (error) { + handleOffline(); + } + }; useEffect(() => { // Need to set here because the listener doesn’t fire on initial load setIsOffline(!window.navigator.onLine); - + if (!window.navigator.onLine) { + checkOnlineStatus(); + } window.addEventListener("offline", handleOffline); window.addEventListener("online", handleOnline);