diff --git a/src/excalidraw-app/app_constants.ts b/src/excalidraw-app/app_constants.ts index 47ae8e634..3997f7216 100644 --- a/src/excalidraw-app/app_constants.ts +++ b/src/excalidraw-app/app_constants.ts @@ -8,6 +8,7 @@ export const SYNC_BROWSER_TABS_TIMEOUT = 50; export const CURSOR_SYNC_TIMEOUT = 33; // ~30fps export const DELETED_ELEMENT_TIMEOUT = 24 * 60 * 60 * 1000; // 1 day export const HIDDEN_DISCONNECT_TIMEOUT = 30000; +export const RECONNECT_TOAST_DURATION = 2000; export const FILE_UPLOAD_MAX_BYTES = 3 * 1024 * 1024; // 3 MiB // 1 year (https://stackoverflow.com/a/25201898/927631) diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx index b4e7c0858..e50408354 100644 --- a/src/excalidraw-app/index.tsx +++ b/src/excalidraw-app/index.tsx @@ -44,6 +44,7 @@ import { import { FIREBASE_STORAGE_PREFIXES, HIDDEN_DISCONNECT_TIMEOUT, + RECONNECT_TOAST_DURATION, STORAGE_KEYS, SYNC_BROWSER_TABS_TIMEOUT, } from "./app_constants"; @@ -84,7 +85,6 @@ import { Provider, useAtom } from "jotai"; import { jotaiStore, useAtomWithInitialValue } from "../jotai"; import { reconcileElements } from "./collab/reconciliation"; import { parseLibraryTokensFromUrl, useHandleLibrary } from "../data/library"; -import { Toast } from "../components/Toast"; polyfill(); window.EXCALIDRAW_THROTTLE_RENDER = true; @@ -250,8 +250,8 @@ const PlusAppLinkJSX = ( const ExcalidrawWrapper = () => { const [errorMessage, setErrorMessage] = useState(""); - const [toast, setToast] = useState(null); const disconnectRef = useRef(false); + const toastRef = useRef(null); let currentLangCode = languageDetector.detect() || defaultLang.code; if (Array.isArray(currentLangCode)) { currentLangCode = currentLangCode[0]; @@ -482,17 +482,17 @@ const ExcalidrawWrapper = () => { } else { cancelPrevDisconnect(); disconnect(); - setToast(null); + excalidrawAPI.setToast(null); } } else { cancelPrevDisconnect(); if (!collabAPI.isCollaborating()) { - if (!toast && disconnectRef.current) { - setToast({ + if (!toastRef.current && disconnectRef.current) { + toastRef.current = { message: t("toast.reconnectRoomServer"), - duration: Infinity, + duration: RECONNECT_TOAST_DURATION, closable: true, - }); + }; } disconnectRef.current && (await initializeScene({ collabAPI, excalidrawAPI }).then( @@ -504,12 +504,16 @@ const ExcalidrawWrapper = () => { ...data.scene, ...restore(data.scene, null, null), commitToHistory: true, + appState: { + ...excalidrawAPI.getAppState(), + toast: toastRef.current, + }, }); excalidrawAPI.scrollToContent(); } }, )); - setToast(null); + toastRef.current = null; disconnectRef.current = false; } } @@ -744,7 +748,7 @@ const ExcalidrawWrapper = () => { return (
@@ -794,14 +798,6 @@ const ExcalidrawWrapper = () => { onClose={() => setErrorMessage("")} /> )} - {toast && ( - setToast(null)} - /> - )}
); };