Continue to show connecting until synced

aaron7 · Jun 15, 2024 · f354579 · f354579
1 parent 27345f8
commit f354579
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 8 deletions.
diff --git a/app/src/hooks/webrtc.tsx b/app/src/hooks/webrtc.tsx
@@ -26,6 +26,7 @@ const useWebrtcProvider = ({ session, setValue }: UseWebrtcProviderProps) => {
     new Map(),
   );
   const [isConnected, setIsConnected] = useState(false);
+  const [hasSynced, setHasSynced] = useState(false);
 
   // Create a new webrtcProvider when the session changes
   useEffect(() => {
@@ -59,22 +60,37 @@ const useWebrtcProvider = ({ session, setValue }: UseWebrtcProviderProps) => {
       setIsConnected(event.connected);
     };
 
+    const onSynced = () => {
+      if (!hasSynced) {
+        setHasSynced(true);
+      }
+    };
+
     const onAwarenessUpdate = () => {
       const awarenessStates = webrtcProvider?.awareness.getStates();
       setAwarenessStates(new Map(awarenessStates));
     };
 
     webrtcProvider?.on('status', onStatus);
+    webrtcProvider?.on('synced', onSynced);
     webrtcProvider?.awareness.on('update', onAwarenessUpdate);
 
     return () => {
       webrtcProvider?.off('status', onStatus);
+      webrtcProvider?.off('synced', onSynced);
       webrtcProvider?.awareness.off('update', onAwarenessUpdate);
     };
-  }, [setAwarenessStates, webrtcProvider, webrtcProvider?.awareness]);
+  }, [
+    hasSynced,
+    setHasSynced,
+    setAwarenessStates,
+    webrtcProvider,
+    webrtcProvider?.awareness,
+  ]);
 
   return {
     awarenessStates,
+    hasSynced,
     isConnected,
     webrtcProvider,
   };
@@ -93,10 +109,11 @@ export const useCollabProvider = ({
 
   const { settings } = useSettings();
 
-  const { awarenessStates, isConnected, webrtcProvider } = useWebrtcProvider({
-    session,
-    setValue,
-  });
+  const { awarenessStates, hasSynced, isConnected, webrtcProvider } =
+    useWebrtcProvider({
+      session,
+      setValue,
+    });
   const [isActive, setIsActive] = useState(true);
 
   useEffect(() => {
@@ -132,6 +149,7 @@ export const useCollabProvider = ({
 
   return {
     awarenessStates,
+    hasSynced,
     isActive,
     isConnected,
     isHostOnline,

diff --git a/app/src/routes/Session.tsx b/app/src/routes/Session.tsx
@@ -17,9 +17,16 @@ const Session = () => {
 
   const editorRefs = React.useRef<ReactCodeMirrorRef>({});
   const [value, setValue] = useState<string>('');
+  const [hasSeenEditor, setHasSeenEditor] = useState(false);
 
-  const { isActive, isConnected, isHostOnline, onEndSession, webrtcProvider } =
-    useCollabProvider({ session, setValue });
+  const {
+    hasSynced,
+    isActive,
+    isConnected,
+    isHostOnline,
+    onEndSession,
+    webrtcProvider,
+  } = useCollabProvider({ session, setValue });
 
   const onEditorChange = React.useCallback((val: string) => {
     setValue(val);
@@ -39,7 +46,12 @@ const Session = () => {
     }
   };
 
-  if (!webrtcProvider || !isConnected) {
+  if (
+    !webrtcProvider ||
+    !isConnected ||
+    !hasSynced ||
+    (!hasSeenEditor && !isHostOnline)
+  ) {
     return (
       <Loading
         copy="If you cannot connect, either the host is offline or the secret URL is incorrect."
@@ -71,6 +83,10 @@ const Session = () => {
     );
   }
 
+  if (!hasSeenEditor) {
+    setHasSeenEditor(true);
+  }
+
   return (
     <div className="flex h-full flex-col">
       <StatusBar