Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Task editing UI continuously re-renders, causing high CPU usage and some UI issues #125

Open
GottemHams opened this issue Jan 10, 2024 · 8 comments
Open

Task editing UI continuously re-renders, causing high CPU usage and some UI issues #125

GottemHams opened this issue Jan 10, 2024 · 8 comments

Comments

@GottemHams
Copy link

Description

I'm not 100% sure if this is an issue with the Vikunja frontend itself or one of the frameworks it uses (I think it's Vue/Vite?), but it seems most appropriate to start here. I tried searching in all mentioned repositories for some parts of the JavaScript I've shown further below but nothing came up. The issue only seems to exist on Firefox and occurs even in safe mode (all addons disabled), although I've only tested with Chrome besides.

It looks like almost the entire UI is continuously being re-rendered when the edit task page is open, even without any interaction with any part of the UI. This happens regardless of the task UI being rendered in a modal (e.g. opening a task from the kanban view) or in its own separate page (e.g. from list view). Firefox's developer console highlights modified nodes with a yellow background, which as you can see are quite a lot of nodes.

The re-render happens fast enough that all those nodes are never not highlighted, which causes a major spike in CPU usage. When the task UI is in a modal and I close it, CPU usage immediately drops back down to sub 1% or even "idle", so it's not an issue with the page it was shown on.

It also causes some side effects with usability of the UI, particularly an opened select input which keeps resetting the selection to its current value (e.g. the task relation type input). This again happens very fast, it's nearly impossible to select the value you actually want. Unless you know exactly what you need and can use your keyboard to change the value while it has focus (but not opened). Here's a lil' screen recording. Text inputs seem unaffected at least.

Since even the document's root (<html>) is being modified, I decided to add a breakpoint on that tag for attribute modifications. It seems a certain attribute is continuously being added and removed, and due to the reactiveness of Vue/Vite it also re-renders a whole bunch of child components every time? First it showed me <html class="dark" q-has-scope5301926="" lang="en"> and 2 breakpoints later it becomes <html class="dark" q-has-scope5218981="" lang="en">. The JS code the debugger is breaking on:

var Be = 'q-has-scope' + (Math.floor(9000000 * Math.random()) + 1000000);
ze.setAttribute(Be, '');

// Then the breakpoint after that:
if (ze.removeAttribute(Be), Ve.length > 0) {

As I've mentioned in the starting paragraph: I tried searching for some key parts of this JS in Vue/Vite/Vikunja repos (hoping to find the unobfuscated source) and I couldn't find anything, hence why I'm not sure in what part of the chain this problem exists.

I created a new task on the demo site and I have the same issue there.

Vikunja Frontend Version

0.22.0

Vikunja API Version

0.22.0

Browser and version

Firefox ESR 115.6.0

Can you reproduce the bug on the Vikunja demo site?

Yes

Screenshots

No response
@kolaente
Copy link
Member

I could not reproduce this in Firefox 121.0, not with the unstable build running on try or locally with a dev build. The tab uses < 0.5% cpu when inactive. Does the task you tested this with have any special attributes?

This sounds like an issue in Vue though. Not sure how to debug this.

@GottemHams
Copy link
Author

The task doesn't have anything special, literally just creating a new empty task and viewing it is enough.

@kolaente
Copy link
Member

Are you able to reproduce this with a newer firefox?

@GottemHams
Copy link
Author

I'm on the newest version of Firefox's ESR branch. Haven't tried the regular branch though, can maybe do that tomorrow.

@GottemHams
Copy link
Author

Alright, so it does seem to work fine on regular Firefox. ESR is officially supported by Mozilla though, and I have my reasons for not using "standard" Firefox in the first place. ;_;

I decided to try removing some elements to see if I could get it to stop re-rendering, then keep going further down the tree to find the actual offending elements. Turns out it's related to Tiptap and/or ProseMirror:

<div class="tiptap ProseMirror" tabindex="0" translate="no" contenteditable="false">
	<p data-placeholder="Enter a description, hit '/' for more options…" class="is-empty is-editor-empty">
		<br class="ProseMirror-trailingBreak">
	</p>
</div>

The editor is being used twice on the task page, once for the task description and another is for adding a new comment. It was literally impossible to remove (or even simply expand) the <p> tag it contains as it seems to be continuously re-added, so it looks like the editor is continuously resetting its innerHTML for whatever reason. I tried entering only 1 character of text in both editors and the re-rendering stops. Both need to have something in them though, so unfortunately it's not as simple as "just enter a task description". The editor being focused (or not) also doesn't matter.

I went looking for some other pages with a rich text editor on them, and I found the project and team edit pages where there's an editor for their descriptions. These have the same issue and the same workaround also works there.

Does this help any? :>

@kolaente
Copy link
Member

This sounds like a bug with the placeholder plugin. I'll take a look.

@kolaente
Copy link
Member

Looks like it is not the placeholder. Using git bisect I was able to pin it down to tiptap (the new editor), but it looks like this is not something specific to Vikunja's configuration of it. Given this bug only exists in ESR and there's no obvious fix for this, let's put this on hold until there is a tiptap or Firefox ESR update.

@GottemHams
Copy link
Author

Alright, just lemme know when you've updated Tiptap in Vikunja and I'll try again.

@kolaente kolaente transferred this issue from go-vikunja/frontend Feb 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kolaente @GottemHams