From 5900176b584a20e09c528fdd9fa213a377567917 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Fri, 29 Oct 2021 23:28:41 -0700
Subject: [PATCH] feat: Show collaborative cursors on load closes #2704

---
 app/components/Editor.js | 3 +++
 app/styles/animations.js | 6 ++++++
 2 files changed, 9 insertions(+)

diff --git a/app/components/Editor.js b/app/components/Editor.js
index d31f5713..98eb060c 100644
--- a/app/components/Editor.js
+++ b/app/components/Editor.js
@@ -12,6 +12,7 @@ import ErrorBoundary from "components/ErrorBoundary";
 import Tooltip from "components/Tooltip";
 import useMediaQuery from "hooks/useMediaQuery";
 import useToasts from "hooks/useToasts";
+import { fadeOutCursor } from "styles/animations";
 import { type Theme } from "types";
 import { isModKey } from "utils/keyboard";
 import { uploadFile } from "utils/uploadFile";
@@ -269,6 +270,7 @@ const StyledEditor = styled(RichMarkdownEditor)`
         bottom: 0;
       }
       > div {
+        animation: ${fadeOutCursor} 2000ms ease-out;
         opacity: 0;
         position: absolute;
         top: -1.8em;
@@ -285,6 +287,7 @@ const StyledEditor = styled(RichMarkdownEditor)`
         pointer-events: none;
         left: -1px;
       }
+
       &:hover {
         > div {
           opacity: 1;
diff --git a/app/styles/animations.js b/app/styles/animations.js
index d1472d15..a231bc07 100644
--- a/app/styles/animations.js
+++ b/app/styles/animations.js
@@ -6,6 +6,12 @@ export const fadeIn = keyframes`
   to { opacity: 1; }
 `;
 
+export const fadeOutCursor = keyframes`
+  0% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { opacity: 0; }
+`;
+
 export const fadeAndScaleIn = keyframes`
   from {
     opacity: 0;