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

Prefetch event schedule data to improve initial load speed #108

Merged
merged 5 commits into from
Apr 21, 2023

Conversation

joshuayoes
Copy link
Contributor

@joshuayoes joshuayoes commented Apr 12, 2023

Description

Trello Card

One of the benefits of React Query is that we can have patterns like pre-populating a query cache so it seems like a transition is "instant".

This PR separates out queryKeys and queryFns from hooks so that we can prefetch the event schedule queries on the initial welcome screen. That way, when the user clicks to the event schedule, it feels instantaneous because the data has already been fetched.

This PR also updates Prettier because the existing version had an issue parsing the satisifies TypeScript keyword. yarn format was also run which updated a few unrelated screens.

Graphics

The webflow network request in "Before" occur only once the user navigates to the event schedule screen. Whereas the network requests in "After" occur as soon as the app loads.

Before After
Screen.Recording.2023-04-11.at.8.25.52.PM.mov
Screen.Recording.2023-04-11.at.8.32.26.PM.mov

Checklist:

  • I have done a thorough self-review of my code
  • I have tested with a screen reader and font-scaling turned on and added necessary accessibility features
  • I have run tests and linter

@joshuayoes joshuayoes requested a review from morganick April 20, 2023 21:31
@joshuayoes joshuayoes self-assigned this Apr 20, 2023
Copy link
Collaborator

@mazenchami mazenchami left a comment

Choose a reason for hiding this comment

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

this is a really cool refactor and i think would help us potentially solve #153?

app/services/api/webflow-api.ts Outdated Show resolved Hide resolved
Copy link
Collaborator

@mazenchami mazenchami left a comment

Choose a reason for hiding this comment

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

LGTM! 🎉 🚀

@joshuayoes joshuayoes merged commit 5d05575 into main Apr 21, 2023
@joshuayoes joshuayoes deleted the queries-refactor branch April 21, 2023 19:03
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.

2 participants