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

perf(icon): render icon sooner if already visible or loaded #9197

Merged
merged 1 commit into from May 9, 2024

Conversation

jcfranco
Copy link
Member

@jcfranco jcfranco commented Apr 25, 2024

Related Issue: N/A

Summary

Improves icon rendering by:

  • avoiding visibility checks on connect if icon is already visible
  • making icon path data assignment sync when cached
  • drop fetching on componentWillLoad since icon data fetching will occur when the component is visible

@github-actions github-actions bot added the chore Issues with changes that don't modify src or test files. label Apr 25, 2024
@jcfranco jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Apr 26, 2024
@jcfranco jcfranco changed the title perf(icon): improve icon rendering if icon is already visible or loaded perf(icon): render icon sooner if already visible or loaded Apr 26, 2024
Copy link
Contributor

github-actions bot commented May 4, 2024

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

@github-actions github-actions bot added the Stale Issues or pull requests that have not had recent activity. label May 4, 2024
@jcfranco jcfranco marked this pull request as ready for review May 8, 2024 00:14
@jcfranco jcfranco requested a review from a team as a code owner May 8, 2024 00:14
@@ -29,31 +29,51 @@ export const scaleToPx: Record<Scale, number> = {
l: 32,
};

export async function fetchIcon({ icon, scale }: FetchIconProps): Promise<CalciteIconPath> {
function generateIconId({ icon, scale }: FetchIconProps): string {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: can generateIconId appear alphabetically below fetchIcon?

@eriklharper
Copy link
Contributor

Wondering why this snapshot still shows unrendered layer icons? If the icon is already loaded by the copies above the fold, shouldn't they all display further down the page? https://www.chromatic.com/component?appId=6266d45509d7eb004aa254fb&csfId=components-tiles-tile-group--all-variants&buildNumber=4541&k=662af018338159356d0c8c14-1200px-snapshot-true&h=7&b=-3

@eriklharper eriklharper closed this May 8, 2024
@eriklharper eriklharper reopened this May 8, 2024
@eriklharper
Copy link
Contributor

Sorry, github malfunction, didn't mean to close that.

Copy link
Contributor

@eriklharper eriklharper left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All LGTM

@github-actions github-actions bot removed the Stale Issues or pull requests that have not had recent activity. label May 9, 2024
@jcfranco jcfranco merged commit d603ca9 into main May 9, 2024
23 checks passed
@jcfranco jcfranco deleted the jcfranco/speed-up-cached-icon-rendering branch May 9, 2024 22:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
chore Issues with changes that don't modify src or test files. pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants