Skip to content

Conversation

psychedelicious
Copy link
Collaborator

Summary

The gallery was getting very slow.

On main, on FF in dev mode, after loading 2 pages of the gallery so the images are cached, switching between them took ~105ms across 7 renders.

With the changes in this PR, that's down to ~55ms across 3 renders.

This translates to the initial load of gallery pages and switching tabs in the app. Feels way better.

Specific changes:

  • Refactor image context menu to be a singleton. Previously, we were creating a new context menu component for every visible image. When changing pages in the gallery, we had to create new menu components, which was hugely wasteful. Now there is a single context menu and we just update the image it is for, as it is opened.
  • Defer a lot of logic in IAIDndImage & GalleryImage (rendering components, calling hooks) until it's actually needed. We were spending a lot of time doing calculations or renders for things would likely never be used.
  • Memoize a handful of components.

Tested on FF, Safari, Chrome and iOS Safari. Makes a really big difference on iOS.

Related Issues / Discussions

n/a

QA Instructions

Poke around the gallery. Should feel snappier.

Merge Plan

n/a

Checklist

  • The PR has a short but descriptive title, suitable for a changelog
  • Tests added / updated (if applicable)
  • Documentation added / updated (if applicable)

@github-actions github-actions bot added the frontend PRs that change frontend files label Oct 11, 2024
@hipsterusername
Copy link
Member

Oh this is smooooth.

@maryhipp maryhipp enabled auto-merge (rebase) October 11, 2024 13:34
@maryhipp maryhipp merged commit bb59ad4 into main Oct 11, 2024
14 checks passed
@maryhipp maryhipp deleted the psyche/perf/ui/image-component branch October 11, 2024 13:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

frontend PRs that change frontend files

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants