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.

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

fix(ui): Fix jumpy "Source" panel when typing (issue #15961) #18227

Conversation

david-wu-octopus
Copy link
Contributor

Fixes #15961

This PR fixes an issue where each keystroke in the repo URL field of the "Source" panel for creating a new application triggers a call to the backend and component rerender, leading the component to feel "jumpy"

Approach

Investigation

  • The <ApplicationCreatePanel /> parent component has a <Form /> child component with a prop formDidUpdate
  • The value of this prop is a function that updates the desired app data via calling props.onAppChanged()
  • So, each time a keystroke is entered into a form field, app is updated
  • As app is passed as a prop into the child component that renders the "Revision"/"Chart" field of the "Source" panel, every keystroke will cause this field to re-render

Solution

  • On the issue "Source" pane is jumpy when typing repo name for a new app #15961, the suggested approach is to update the UI logic to validate the git repo URL format to reduce jumpiness. The difficulty with this approach is that git supports many URL formats (e.g., ssh, http, https, git), and we would need to maintain this validation logic
  • The alternative approach implemented in this PR is to debounce props.onAppChanged()
  • In my testing, a debounce wait time of 800ms feels like the right balance between maintaining snappiness and preventing unnecessary re-renders

Results

Before

Kapture.2024-05-15.at.16.07.06.mp4

Repo URL field

After

Repo URL field

Kapture.2024-05-15.at.16.47.50.mp4

Creating a new app

Kapture.2024-05-15.at.16.54.43.mp4

Checklist:

  • Either (a) I've created an enhancement proposal and discussed it with the community, (b) this is a bug fix, or (c) this does not need to be in the release notes.
  • The title of the PR states what changed and the related issues number (used for the release note).
  • The title of the PR conforms to the Toolchain Guide
  • I've included "Closes [ISSUE #]" or "Fixes [ISSUE #]" in the description to automatically close the associated issue.
  • I've updated both the CLI and UI to expose my feature, or I plan to submit a second PR with them.
  • Does this PR require documentation updates?
  • I've updated documentation as required by this PR.
  • I have signed off all my commits as required by DCO
  • I have written unit and/or e2e tests for my change. PRs without these are unlikely to be merged.
  • My build is green (troubleshooting builds).
  • My new feature complies with the feature status guidelines.
  • I have added a brief description of why this PR is necessary and/or what this PR solves.
  • Optional. My organization is added to USERS.md.
  • Optional. For bug fixes, I've indicated what older releases this fix should be cherry-picked into (this may or may not happen depending on risk/complexity).

Signed-off-by: David Wu <155603967+david-wu-octopus@users.noreply.github.com>
Signed-off-by: David Wu <155603967+david-wu-octopus@users.noreply.github.com>
@david-wu-octopus david-wu-octopus requested a review from a team as a code owner May 15, 2024 07:35
Signed-off-by: David Wu <155603967+david-wu-octopus@users.noreply.github.com>
@pasha-codefresh
Copy link
Member

Amazing work @david-wu-octopus . Really good solution. Thanks

@pasha-codefresh pasha-codefresh merged commit 462c9ec into argoproj:master May 22, 2024
23 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

"Source" pane is jumpy when typing repo name for a new app
2 participants