diff --git a/desktop/renderer-app/src/pages/BigClassPage/index.tsx b/desktop/renderer-app/src/pages/BigClassPage/index.tsx
index 90a92cc426c..2a92924b002 100644
--- a/desktop/renderer-app/src/pages/BigClassPage/index.tsx
+++ b/desktop/renderer-app/src/pages/BigClassPage/index.tsx
@@ -186,7 +186,7 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
 
     return (
         <div className="realtime-container">
-            {loadingPageRef.current && <LoadingPage />}
+            {loadingPageRef.current && <LoadingPage onTimeout="full-reload" />}
             <div className="realtime-box">
                 <TopBar
                     isMac={runtime.isMac}
diff --git a/desktop/renderer-app/src/pages/OneToOnePage/index.tsx b/desktop/renderer-app/src/pages/OneToOnePage/index.tsx
index 8a2adf64953..1ada6de2484 100644
--- a/desktop/renderer-app/src/pages/OneToOnePage/index.tsx
+++ b/desktop/renderer-app/src/pages/OneToOnePage/index.tsx
@@ -143,7 +143,7 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
 
     return (
         <div className="one-to-one-realtime-container">
-            {loadingPageRef.current && <LoadingPage />}
+            {loadingPageRef.current && <LoadingPage onTimeout="full-reload" />}
             <div className="one-to-one-realtime-box">
                 <TopBar
                     isMac={runtime.isMac}
diff --git a/desktop/renderer-app/src/pages/SmallClassPage/index.tsx b/desktop/renderer-app/src/pages/SmallClassPage/index.tsx
index 66e7418a8dc..164e78ee8a7 100644
--- a/desktop/renderer-app/src/pages/SmallClassPage/index.tsx
+++ b/desktop/renderer-app/src/pages/SmallClassPage/index.tsx
@@ -161,7 +161,7 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
 
     return (
         <div className="realtime-container">
-            {loadingPageRef.current && <LoadingPage />}
+            {loadingPageRef.current && <LoadingPage onTimeout="full-reload" />}
             <div className="realtime-box">
                 <TopBar
                     isMac={runtime.isMac}
diff --git a/desktop/renderer-app/src/stores/whiteboard-store.ts b/desktop/renderer-app/src/stores/whiteboard-store.ts
index 514adbfa499..bd8c1d98890 100644
--- a/desktop/renderer-app/src/stores/whiteboard-store.ts
+++ b/desktop/renderer-app/src/stores/whiteboard-store.ts
@@ -360,6 +360,7 @@ export class WhiteboardStore {
                     }
                 },
                 onDisconnectWithError: error => {
+                    void message.error(this.i18n.t("on-disconnect-with-error"));
                     this.preloadPPTResource.cancel();
                     console.error(error);
                 },
diff --git a/packages/flat-components/src/components/LoadingPage/index.tsx b/packages/flat-components/src/components/LoadingPage/index.tsx
index 6dffdece25e..bccc28ecbfe 100644
--- a/packages/flat-components/src/components/LoadingPage/index.tsx
+++ b/packages/flat-components/src/components/LoadingPage/index.tsx
@@ -1,19 +1,26 @@
 import "./style.less";
 import loadingGIF from "./icons/loading.gif";
 
-import React, { FC, useEffect, useState } from "react";
-import { Button } from "antd";
+import React, { FC, useCallback, useEffect, useState } from "react";
 import classNames from "classnames";
-import { Link } from "react-router-dom";
+import { Button } from "antd";
 import { useTranslation } from "react-i18next";
 
 export interface LoadingPageProps {
     text?: string;
     timeMS?: number;
     hasHeader?: boolean;
+    onTimeout?: "return-home" | "full-reload" | (() => void);
+    onTimeoutText?: string;
 }
 
-export const LoadingPage: FC<LoadingPageProps> = ({ text, timeMS = 20 * 1000, hasHeader }) => {
+export const LoadingPage: FC<LoadingPageProps> = ({
+    text,
+    timeMS = 20 * 1000,
+    hasHeader,
+    onTimeout = "return-home",
+    onTimeoutText,
+}) => {
     const [isShowReturnHomePage, showReturnHomePage] = useState(false);
     const { t } = useTranslation();
 
@@ -23,6 +30,21 @@ export const LoadingPage: FC<LoadingPageProps> = ({ text, timeMS = 20 * 1000, ha
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    const timeoutText =
+        onTimeoutText || (typeof onTimeout === "string" ? t(onTimeout) : t("return-home"));
+
+    const timeoutBehavior = useCallback(
+        (type: "return-home" | "full-reload") => () => {
+            if (type === "return-home") {
+                window.location.pathname = "/";
+            }
+            if (type === "full-reload") {
+                window.location.reload();
+            }
+        },
+        [],
+    );
+
     return (
         <div className="loading-page">
             <div
@@ -34,14 +56,15 @@ export const LoadingPage: FC<LoadingPageProps> = ({ text, timeMS = 20 * 1000, ha
                 <img className="loading-page-image" src={loadingGIF} alt="loading" />
                 {text && <span>{text}</span>}
             </div>
-            <Link
-                to="/"
+            <Button
+                size="large"
                 className={classNames("loading-page-return-btn", {
                     "is-show": isShowReturnHomePage,
                 })}
+                onClick={typeof onTimeout === "string" ? timeoutBehavior(onTimeout) : onTimeout}
             >
-                <Button size="large">{t("return-home")}</Button>
-            </Link>
+                {timeoutText}
+            </Button>
         </div>
     );
 };
diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
index b8a819d1c55..90c35748434 100644
--- a/packages/flat-i18n/locales/en.json
+++ b/packages/flat-i18n/locales/en.json
@@ -85,6 +85,8 @@
     "time": "by room end date"
   },
   "return-home": "Return Home",
+  "full-reload": "Refresh",
+  "on-disconnect-with-error": "The network is not available",
   "error-page-description": "Please try again",
   "error-page-title": "Sorry, we have an unknown error",
   "error-page-return-home": "({{countdown}}) Go Back",
diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
index c806971c637..13c7938e723 100644
--- a/packages/flat-i18n/locales/zh-CN.json
+++ b/packages/flat-i18n/locales/zh-CN.json
@@ -85,6 +85,8 @@
     "SmallClass": "最多 16 位学生"
   },
   "return-home": "返回首页",
+  "full-reload": "刷新",
+  "on-disconnect-with-error": "当前网络不可用",
   "error-page-title": "抱歉，遇到未知错误",
   "error-page-description": "请重试",
   "error-page-return-home": "({{countdown}}) 返回首页",
diff --git a/web/flat-web/src/pages/BigClassPage/index.tsx b/web/flat-web/src/pages/BigClassPage/index.tsx
index c68aba2ec05..4e28ba29ddf 100644
--- a/web/flat-web/src/pages/BigClassPage/index.tsx
+++ b/web/flat-web/src/pages/BigClassPage/index.tsx
@@ -171,7 +171,7 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
 
     return (
         <div className="realtime-container">
-            {loadingPageRef.current && <LoadingPage />}
+            {loadingPageRef.current && <LoadingPage onTimeout="full-reload" />}
             <div className="realtime-box">
                 <TopBar
                     isMac={runtime.isMac}
diff --git a/web/flat-web/src/pages/OneToOnePage/index.tsx b/web/flat-web/src/pages/OneToOnePage/index.tsx
index 2a15974bca7..ef4ca9196b6 100644
--- a/web/flat-web/src/pages/OneToOnePage/index.tsx
+++ b/web/flat-web/src/pages/OneToOnePage/index.tsx
@@ -126,7 +126,7 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
 
     return (
         <div className="one-to-one-realtime-container">
-            {loadingPageRef.current && <LoadingPage />}
+            {loadingPageRef.current && <LoadingPage onTimeout="full-reload" />}
             <div className="one-to-one-realtime-box">
                 <TopBar
                     isMac={runtime.isMac}
diff --git a/web/flat-web/src/pages/SmallClassPage/index.tsx b/web/flat-web/src/pages/SmallClassPage/index.tsx
index a11f85cd627..e4392c2ebcc 100644
--- a/web/flat-web/src/pages/SmallClassPage/index.tsx
+++ b/web/flat-web/src/pages/SmallClassPage/index.tsx
@@ -151,7 +151,7 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
 
     return (
         <div className="realtime-container">
-            {loadingPageRef.current && <LoadingPage />}
+            {loadingPageRef.current && <LoadingPage onTimeout="full-reload" />}
             <div className="realtime-box">
                 <TopBar
                     isMac={runtime.isMac}
diff --git a/web/flat-web/src/stores/whiteboard-store.ts b/web/flat-web/src/stores/whiteboard-store.ts
index c565d625bc8..1b2a1779857 100644
--- a/web/flat-web/src/stores/whiteboard-store.ts
+++ b/web/flat-web/src/stores/whiteboard-store.ts
@@ -364,6 +364,7 @@ export class WhiteboardStore {
                     }
                 },
                 onDisconnectWithError: error => {
+                    void message.error(this.i18n.t("on-disconnect-with-error"));
                     console.error(error);
                     this.preloadPPTResource.cancel();
                 },