Candidacy process interrupted, editor caused CPU load, transaction not picked up

[traumschule]

Route: https://dao.joystream.org/#/election, last step of Announce Candidacy modal

TLDR Users wan't to use keyboard navigation and click to position the cursor without the editor changing cursor position.

Reported here and here.

The candidacy editor does some tricks to position cursor (or it may be a side-effect of onChange updating content), i suggest to remove that / time it better (like after 500ms user inactivity or similar). Reasons and observations:

Editing text for candidacy announcement .. Some really weird cursor jumping going on.
seeing a regression when announcing candidacy. It fails to pick up the transaction again. Also CPU load is >80% = not ok. Also fails to redraw screen.
tried to reproduce as well, did not happen yet
It could be the editor that does some cursor tricks similar to what was fixed (i think) for the forum. Maybe best to remove that code.
Like i was unable to mark two words either with the mouse or Shift + Arrow to set a link because it was repositioning the cursor all the time.
CPU load was massive which could be the reason that the transaction wasn't picked up in time. No idea what triggered it but something was stuck in a loop.

related:

• Proposal Flow Hire WG Lead: Editing proposal title is broken #2278
• 🍉 Handle summary and candidacy previews for announce candidacy #1600

• pioneer/packages/ui/src/common/components/CKEditor/CKEditor.tsx

  Line 134 in 825d327

  onChange={(_, editor) => formContext.setValue(name, editor.getData(), { shouldValidate: true })}

[dmtrjsg]

We are not sure what can be done here, so pls let me know if this repeats and we will re-open. @traumschule

[traumschule]

It needs a performance audit, for example with dev tools.

[dmtrjsg]

ok re-opened, added to community pipe, pls feel free to take this one on at some point. But pls bear in mind that issues marked with label:mainnet are of highest prio.

cc @singulart

[ivanturlakov]

✅ Tested on https://dao-git-carthage-joystream.vercel.app/#/election
wss://44.201.112.198.nip.io/ws-rpc

Chrome 107.0.5304.87, (x86_64)

While filling out the application, I tried to load the editor as much as possible and keep the modal open for a long time. Sometimes, especially when I inserted large chunks of text into the editor, the CPU load jumped up to 90 percent, but then quickly returned to normal. In general, I did not encounter the problems described above, the process of editing and submission was successful.

2022-11-02.14.26.48.mov

[traumschule]

Unfortunately i got some to back this up again.

I just filled out my candidacy and it felt like the tab would crash anytime. At first everything was fine filling bullet points, adding a description, going back and forth but i think what "broke" it (ie caused some kind of loop and continuous load) was the editor as assumed before.

Specifically links and marking text via cursor (shift + arrows) or cursor selection fails because the editor does something to reset text selection and repositions the cursor in another ticket.
I noticed the edit link feature has a bug where after editing it sticks the cursor to the link title in the text and wants me to keep editing the link until i click it, then the pen and abort to "achieve" free editing again.

Finally was able to start the signing process, at this point the whole browser feels sticky, the extension tab opened with long delay, password entered and confirmed. Going back to the tab it looked less comforting and i had to assume everything was lost (knowing it does not backup to browser store after editing).

After that something sad happened and i don't know why:

2022-11-08 10:26:56 RPC-CORE: submitAndWatchExtrinsic(extrinsic: Extrinsic): ExtrinsicStatus:: 1010: Invalid Transaction: Transaction has a bad signature
logger.cjs:63 2022-11-08 10:26:56 DRR: 1010: Invalid Transaction: Transaction has a bad signature
logger.cjs:63 2022-11-08 10:26:56 RPC-CORE: submitAndWatchExtrinsic(extrinsic: Extrinsic): ExtrinsicStatus:: 1010: Invalid Transaction: Transaction has a bad signature


Now the modal is in that state with inactive buttons and no content. Probably got to scrape my text from RAM or a browser core dump. </SadUserstory>

Process

After click to sign before activating extension

Long waiting for page rebuild/-render

After signing

Final state

Triage

=> allow user to retry signing after failed attempt
=> investigate editor cursor lock and link features

Debugger landed there when i paused the thread - looks like a loop but why infinite?

[traumschule]

not reproducible on dev, closing