processing / processing/p5.js-web-editor

web editor lag spike when switching between large text files when find/replace tool open

Open
#4,103 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Awaiting Maintainer Approval Bug
Dominant language
JavaScript
Stars
1.7k
Forks
1.7k
Avg merge
3d 4h
Merged PRs (30d)
8

Description

p5.js version

1.11.13

What is your operating system?

Chromebook (school-owned)

Web browser and version

chrome

Actual Behavior

Device: Lenovo 300e Yoga Chromebook Gen 4 (school-owned).
In the web editor, when the web editor's ctrl+F text find/replace tool is open (with some text to find in it), if the user switches text files within the project editor or starts typing in the text file, the user experiences a lag spike that renders the editor chrome tab unresponsive for prolonged periods (sometimes longer than a minute). This happens when my javascript files are several thousand lines of code long or longer.

The issue makes it difficult to use the p5js web editor.

Expected Behavior

The chrome tab should not freeze for a few minutes when I switch between long text files in the editor with the text find/replace tool open.

Steps to reproduce
Steps:
  1. open a project with more than one javascript files at least several thousand lines long.
  2. open the editor's built-in text find/replace tool and use it to find some text in one of the files.
  3. switch to the other long text file without closing the find/replace tool.
  4. You can also induce the spike by editing the long code file while the find/replace tool is still open.

My project (where I experience issues): https://editor.p5js.org/davidjramirez04/sketches/sIEIjaKEI
The lag spikes are attributed to the sheer size of the code files, especially when using the text finder.
Hyperkhukku III battle simulator (google it)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue in Chrome using the linked project, with the built-in find/replace tool open while switching between or editing large JavaScript files. Trace the web editor's find/replace and file-switching entry points, then measure the lag during these actions. Done means large files no longer cause prolonged tab unresponsiveness in the described workflow.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.