Fade out user cursor labels after five seconds of inactivity #4336

mejo- · 2023-06-21T14:49:25Z

📝 Summary

Fade out user cursor labels after inactivity.

Implementation details:

Add a custom CollaborationCursor Tiptap extension
Add CSS to fade out the cursor label after some time.
Listen for Yjs updates.
- If it's a doc change by ourself, update the timestamp of own user in
  awareness state.

If it's a remote awareness update, add back the CSS class to the
corresponding cursor.
Wait 50ms before showing the cursor in the DOM to account for cases
where the cursor gets re-rendered by y-prosemirror.

Fixes: #4126

🏁 Checklist

Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
Sign-off message is added to all commits
Tests (unit, integration and/or end-to-end) passing and the changes are covered with tests
Documentation is not required

cypress · 2023-06-21T14:54:24Z

Passing run #11351 ↗︎

0	149	2	0	0

Details:

Fade out user cursor labels after five seconds of inactivity
Project: Text	Commit: `7332d992b1`
Status: Passed	Duration: 03:27 💡
Started: Jul 28, 2023 6:40 AM	Ended: Jul 28, 2023 6:43 AM

_{This comment has been generated by cypress-bot as a result of this
project's GitHub integration settings.}

src/helpers/yjs.js

src/components/Editor.vue

juliushaertl

Generally the change looks good to me, animation behaviour seems very stable and looks nice. However updating the timestamp on the awareness state seems to cause two push requests for typing an individual character (one for the awareness, one for the step). Maybe we can combine them in some way?

max-nextcloud · 2023-07-27T14:21:08Z

Generally the change looks good to me, animation behaviour seems very stable and looks nice. However updating the timestamp on the awareness state seems to cause two push requests for typing an individual character (one for the awareness, one for the step). Maybe we can combine them in some way?

We're now waiting 50ms before sending out the first push. This way the awareness update will be part of it.

juliushaertl · 2023-07-27T18:17:24Z

src/services/SyncService.js

@@ -165,7 +162,7 @@ class SyncService {
 					this.#sendIntervalId = null
 					this._sendSteps(getSendable).then(resolve).catch(reject)
 				}
-			}, 200)
+			}, 50)


This could have an impact on the resource demand due to increased push requests on the server. I think the PR itself should also be fine with the existing 200ms. Any reason to decrease that specific to the cursor hiding?

This is a bit tricky as we change the initial waiting. Before if there was no request pending we would just send it immediately - so the 200 ms had no effect at all. Now we also delay this initial message.

I remember that 200ms are roughly what the human brain starts to notice as a delay. But that is only if one is waiting for a direct response from the UI. This will only delay the sync between different parties. So 200 ms are probably okay there as well.

I'd say we go with the 200 ms and if we notice usability issues with it we can change it to 50 ms on the initial request and 200 when another request is pending.

Okay... so i gave this a try locally with 200 and noticed that the polling delay still is the main delay one notices. If I type fairly fast 200ms will result in two keystrokes getting combined in one push request. That seems totally reasonable. If this actually reduces the number of requests send - even better.

juliushaertl

Tested and works, one question regarding reducing the push interval inline

Implementation details: * Add a custom CollaborationCursor Tiptap extension * Add CSS to fade out the cursor label after some time. * Listen for Yjs updates. - If it's a doc change by ourself, update the timestamp of own user in awareness state. - If it's a remote awareness update, add back the CSS class to the corresponding cursor. - Wait 50ms before showing the cursor in the DOM to account for cases where the cursor gets re-rendered by y-prosemirror. Fixes: #4126 Signed-off-by: Jonas <jonas@freesources.org>

max-nextcloud · 2023-07-28T05:59:29Z

/compile

max-nextcloud · 2023-07-28T06:20:31Z

Funny that lint passes even though we introduced a warning.
I think the workflow probably was updated from a template.

max-nextcloud · 2023-07-28T06:24:53Z

/compile

Document changes trigger awareness updates. Wait before sending them in a push request so they can be combined. Also make use of prosemirrors transactions to detect own changes instead of listening to yjs updates. Signed-off-by: Max <max@nextcloud.com>

max-nextcloud · 2023-07-28T06:35:26Z

/compile

max-nextcloud · 2023-07-28T06:36:38Z

/backport b7baceb,928fe3527a7467c78612e7db43fe35dead65819a to stable27

max-nextcloud · 2023-07-28T06:37:02Z

backport b7baceb,928fe3527a7467c78612e7db43fe35dead65819a to stable26

Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

max-nextcloud · 2023-07-28T06:38:15Z

I'm not sure about the backports. 27 is pretty clear to me also as this does not break any api and 28 will still be quite some time into the future. But 26 I don't know.

mejo- · 2023-07-28T10:21:57Z

I think we discussed this already and decided to backport this to stable26 as well, because it fixes an annoying usability bug.

max-nextcloud · 2023-07-28T10:23:42Z

/backport b7baceb,928fe3527a7467c78612e7db43fe35dead65819a to stable26

mejo- added enhancement New feature or request 2. developing labels Jun 21, 2023

mejo- requested review from juliushaertl and max-nextcloud June 21, 2023 14:49

mejo- added bug Something isn't working and removed enhancement New feature or request labels Jun 21, 2023

mejo- force-pushed the enh/hide_cursors branch from a78c3c4 to 1d2d80c Compare June 21, 2023 14:54

juliushaertl reviewed Jun 21, 2023

View reviewed changes

src/helpers/yjs.js Outdated Show resolved Hide resolved

juliushaertl reviewed Jun 22, 2023

View reviewed changes

src/components/Editor.vue Outdated Show resolved Hide resolved

mejo- force-pushed the enh/hide_cursors branch from 1d2d80c to 40c3b6d Compare June 26, 2023 10:43

mejo- requested a review from juliushaertl June 26, 2023 10:44

juliushaertl reviewed Jun 27, 2023

View reviewed changes

src/components/Editor.vue Outdated Show resolved Hide resolved

mejo- force-pushed the enh/hide_cursors branch from 40c3b6d to 8cd8de6 Compare July 25, 2023 15:09

mejo- added 3. to review and removed 2. developing labels Jul 26, 2023

mejo- requested a review from juliushaertl July 26, 2023 08:04

mejo- force-pushed the enh/hide_cursors branch from 8cd8de6 to b2b299e Compare July 26, 2023 08:06

juliushaertl requested changes Jul 26, 2023

View reviewed changes

max-nextcloud requested review from juliushaertl and removed request for max-nextcloud July 27, 2023 14:19

max-nextcloud force-pushed the enh/hide_cursors branch from 4f0b88a to 68832c4 Compare July 27, 2023 14:21

juliushaertl reviewed Jul 27, 2023

View reviewed changes

juliushaertl approved these changes Jul 27, 2023

View reviewed changes

max-nextcloud force-pushed the enh/hide_cursors branch from 68832c4 to ad800aa Compare July 28, 2023 05:56

max-nextcloud force-pushed the enh/hide_cursors branch from ad800aa to 7412c4e Compare July 28, 2023 05:59

max-nextcloud force-pushed the enh/hide_cursors branch from 9bd5767 to 55e4679 Compare July 28, 2023 06:24

max-nextcloud force-pushed the enh/hide_cursors branch from a18ccab to 928fe35 Compare July 28, 2023 06:27

backportbot-nextcloud bot added the backport-request label Jul 28, 2023

chore(assets): Recompile assets

7332d99

Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

max-nextcloud merged commit a573d74 into main Jul 28, 2023
32 checks passed

max-nextcloud deleted the enh/hide_cursors branch July 28, 2023 06:55

backportbot-nextcloud bot mentioned this pull request Jul 28, 2023

[stable27] Fade out user cursor labels after five seconds of inactivity #4591

Merged

backportbot-nextcloud bot removed the backport-request label Jul 28, 2023

backportbot-nextcloud bot added the backport-request label Jul 28, 2023

backportbot-nextcloud bot mentioned this pull request Jul 28, 2023

[stable26] Fade out user cursor labels after five seconds of inactivity #4593

Merged

backportbot-nextcloud bot removed the backport-request label Jul 28, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fade out user cursor labels after five seconds of inactivity #4336

Fade out user cursor labels after five seconds of inactivity #4336

mejo- commented Jun 21, 2023 •

edited

cypress bot commented Jun 21, 2023 •

edited

juliushaertl left a comment •

edited

max-nextcloud commented Jul 27, 2023 •

edited

juliushaertl Jul 27, 2023

max-nextcloud Jul 28, 2023

max-nextcloud Jul 28, 2023

juliushaertl left a comment

max-nextcloud commented Jul 28, 2023

max-nextcloud commented Jul 28, 2023

max-nextcloud commented Jul 28, 2023

max-nextcloud commented Jul 28, 2023

max-nextcloud commented Jul 28, 2023

max-nextcloud commented Jul 28, 2023

max-nextcloud commented Jul 28, 2023

mejo- commented Jul 28, 2023

max-nextcloud commented Jul 28, 2023

Fade out user cursor labels after five seconds of inactivity #4336

Fade out user cursor labels after five seconds of inactivity #4336

Conversation

mejo- commented Jun 21, 2023 • edited

📝 Summary

🏁 Checklist

cypress bot commented Jun 21, 2023 • edited

Passing run #11351 ↗︎

juliushaertl left a comment • edited

Choose a reason for hiding this comment

max-nextcloud commented Jul 27, 2023 • edited

juliushaertl Jul 27, 2023

Choose a reason for hiding this comment

max-nextcloud Jul 28, 2023

Choose a reason for hiding this comment

max-nextcloud Jul 28, 2023

Choose a reason for hiding this comment

juliushaertl left a comment

Choose a reason for hiding this comment

max-nextcloud commented Jul 28, 2023

max-nextcloud commented Jul 28, 2023

max-nextcloud commented Jul 28, 2023

max-nextcloud commented Jul 28, 2023

max-nextcloud commented Jul 28, 2023

max-nextcloud commented Jul 28, 2023

max-nextcloud commented Jul 28, 2023

mejo- commented Jul 28, 2023

max-nextcloud commented Jul 28, 2023

mejo- commented Jun 21, 2023 •

edited

cypress bot commented Jun 21, 2023 •

edited

juliushaertl left a comment •

edited

max-nextcloud commented Jul 27, 2023 •

edited