reload scene on hashchange (#1893)

* reload scene on hashchange

* tweak isLoading

src/components/App.tsx

@@ -443,6 +443,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       /^#json=([0-9]+),([a-zA-Z0-9_-]+)$/,
     );
 
+    if (!this.state.isLoading) {
+      this.setState({ isLoading: true });
+    }
+
     let scene = await loadScene(null);
 
     let isCollaborationScene = !!getCollaborationLinkData(window.location.href);
@@ -528,6 +532,12 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     this.setState({});
   });
 
+  private onHashChange = (event: HashChangeEvent) => {
+    if (window.location.hash.length > 1) {
+      this.initializeScene();
+    }
+  };
+
   private removeEventListeners() {
     document.removeEventListener(EVENT.COPY, this.onCopy);
     document.removeEventListener(EVENT.PASTE, this.pasteFromClipboard);
@@ -545,6 +555,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     window.removeEventListener(EVENT.BLUR, this.onBlur, false);
     window.removeEventListener(EVENT.DRAG_OVER, this.disableEvent, false);
     window.removeEventListener(EVENT.DROP, this.disableEvent, false);
+    window.removeEventListener(EVENT.HASHCHANGE, this.onHashChange, false);
 
     document.removeEventListener(
       EVENT.GESTURE_START,
@@ -580,6 +591,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     window.addEventListener(EVENT.BLUR, this.onBlur, false);
     window.addEventListener(EVENT.DRAG_OVER, this.disableEvent, false);
     window.addEventListener(EVENT.DROP, this.disableEvent, false);
+    window.addEventListener(EVENT.HASHCHANGE, this.onHashChange, false);
 
     // rerender text elements on font load to fix #637 && #1553
     document.fonts?.addEventListener?.("loadingdone", this.onFontLoaded);

src/constants.ts

@@ -46,6 +46,7 @@ export enum EVENT {
   WHEEL = "wheel",
   TOUCH_START = "touchstart",
   TOUCH_END = "touchend",
+  HASHCHANGE = "hashchange",
 }
 
 export const ENV = {