foss/excalidraw
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix >5s blank scene for first one in the room when reconnecting

Browse Source
This commit is contained in:
Ryan Di 2022-08-30 22:36:24 +08:00
parent c71495b140
commit a1b1a2f9a3
2 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/excalidraw-app/app_constants.ts
View File

@ -8,7 +8,6 @@ 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)

28
src/excalidraw-app/index.tsx
View File

@ -44,7 +44,6 @@ import {
import {
FIREBASE_STORAGE_PREFIXES,
HIDDEN_DISCONNECT_TIMEOUT,
RECONNECT_TOAST_DURATION,
STORAGE_KEYS,
SYNC_BROWSER_TABS_TIMEOUT,
} from "./app_constants";
@ -186,9 +185,8 @@ const initializeScene = async (opts: {
}
if (roomLinkData) {
const { excalidrawAPI } = opts;
const scene = await opts.collabAPI.startCollaboration(roomLinkData);
const { excalidrawAPI, collabAPI } = opts;
const scene = await collabAPI.startCollaboration(roomLinkData);
return {
// when collaborating, the state may have already been updated at this
@ -459,7 +457,7 @@ const ExcalidrawWrapper = () => {
let disconnectTimeout: ReturnType<typeof setTimeout>;
const visibilityChange = (event: FocusEvent | Event) => {
const visibilityChange = async (event: FocusEvent | Event) => {
if (event.type === EVENT.BLUR || document.hidden) {
LocalData.flushSave();
}
@ -492,17 +490,26 @@ const ExcalidrawWrapper = () => {
if (!toast && disconnectRef.current) {
setToast({
message: t("toast.reconnectRoomServer"),
duration: RECONNECT_TOAST_DURATION,
duration: Infinity,
closable: true,
});
}
disconnectRef.current &&
initializeScene({ collabAPI, excalidrawAPI }).then(
(await initializeScene({ collabAPI, excalidrawAPI }).then(
async (data) => {
loadImages(data, /* isInitialLoad */ true);
initialStatePromiseRef.current.promise.resolve(data.scene);
if (data.scene) {
excalidrawAPI.updateScene({
...data.scene,
...restore(data.scene, null, null),
commitToHistory: true,
});
excalidrawAPI.scrollToContent();
}
},
);
));
setToast(null);
disconnectRef.current = false;
}
}
@ -526,7 +533,8 @@ const ExcalidrawWrapper = () => {
);
clearTimeout(titleTimeout);
};
}, [collabAPI, excalidrawAPI, toast]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [collabAPI, excalidrawAPI]);
useEffect(() => {
const unloadHandler = (event: BeforeUnloadEvent) => {
@ -736,7 +744,7 @@ const ExcalidrawWrapper = () => {
return (
<div
style={{ height: "100%" }}
className={clsx("excalidraw excalidraw-app", {
className={clsx("excalidraw-app excalidraw", {
"is-collaborating": isCollaborating,
})}
>