feat: Show collab cursor names upon loading document. (#2732)

Second attempt, adds a class to the editor for a couple of seconds when the awareness is loaded to force cursors to display

app/scenes/Document/components/MultiplayerEditor.js

@@ -10,6 +10,7 @@ import env from "env";
 import useCurrentToken from "hooks/useCurrentToken";
 import useCurrentUser from "hooks/useCurrentUser";
 import useIdle from "hooks/useIdle";
+import useIsMounted from "hooks/useIsMounted";
 import usePageVisibility from "hooks/usePageVisibility";
 import useStores from "hooks/useStores";
 import useToasts from "hooks/useToasts";
@@ -28,6 +29,7 @@ function MultiplayerEditor({ ...props }: Props, ref: any) {
   const currentUser = useCurrentUser();
   const { presence, ui } = useStores();
   const token = useCurrentToken();
+  const [showCursorNames, setShowCursorNames] = React.useState(false);
   const [remoteProvider, setRemoteProvider] = React.useState();
   const [isLocalSynced, setLocalSynced] = React.useState(false);
   const [isRemoteSynced, setRemoteSynced] = React.useState(false);
@@ -35,6 +37,7 @@ function MultiplayerEditor({ ...props }: Props, ref: any) {
   const { showToast } = useToasts();
   const isIdle = useIdle();
   const isVisible = usePageVisibility();
+  const isMounted = useIsMounted();
 
   // Provider initialization must be within useLayoutEffect rather than useState
   // or useMemo as both of these are ran twice in React StrictMode resulting in
@@ -75,6 +78,18 @@ function MultiplayerEditor({ ...props }: Props, ref: any) {
       });
     });
 
+    const showCursorNames = () => {
+      setShowCursorNames(true);
+      setTimeout(() => {
+        if (isMounted()) {
+          setShowCursorNames(false);
+        }
+      }, 2000);
+      provider.off("awarenessChange", showCursorNames);
+    };
+
+    provider.on("awarenessChange", showCursorNames);
+
     localProvider.on("synced", () =>
       // only set local storage to "synced" if it's loaded a non-empty doc
       setLocalSynced(!!ydoc.get("default")._start)
@@ -180,6 +195,7 @@ function MultiplayerEditor({ ...props }: Props, ref: any) {
         extensions={extensions}
         ref={showCache ? undefined : ref}
         style={showCache ? { display: "none" } : undefined}
+        className={showCursorNames ? "show-cursor-names" : undefined}
       />
     </>
   );