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

Use swr and reworking Posts, Post, and Search loading #1217

Merged
merged 4 commits into from
Oct 21, 2020

Conversation

humphd
Copy link
Contributor

@humphd humphd commented Oct 20, 2020

Fixes #1201. I've wanted to try using https://github.com/vercel/swr for a while now, and decided to do an experiment. This PR is not ready, but I wanted to get it build on Vercel so I could see how it works.

This PR does a few things:

  • moves away from us manually managing our data fetching, and let's swr do it instead. The way it works is to give you back a cached version of the data while it goes and gets an updated one (then cache that for next time). The 2nd, 3rd, etc. load is extremely fast
  • I'm reworking how Post and Posts work, so that we delegate more of the loading and don't block for so long. Also, we can use swr here too, since posts can get cached and re-used
  • I notice we still have the syntax highlighting stuff in the frontend, which we don't need anymore.

As I say, this needs more stuff added back (I ripped out most of Posts to do this).

@humphd
Copy link
Contributor Author

humphd commented Oct 20, 2020

I think this is ready for a proper review. I'll explain a bit more about what it does.

I'm adding https://swr.vercel.app/, which is a fantastic React Hook to manage your data fetching and caching. The idea is, use cached data if we have it AND go get new data, so you always get fast results.

I've refactored Posts and Post, and we now have Posts, Timeline, and Post. I wanted to re-use the logic of how our "posts" are shown for both the main timeline and also for search results.

The Post component is now responsible for loading it's own content from the server. It accepts a url to a post on its props, then it manages getting the data and rendering it. This speeds things up by not having so many parallel promises that we have to block on in Posts. I also stripped out the redundant client-side syntax highlighting we were doing--it's all done server side now.

The Posts component has been trimmed down a lot. It uses useSWRInfinite to manage loading posts page-by-page. The results are now returned/stored as an array of arrays (e.g., pages of posts). I manage going to the next page using the setPage() function it provides, which loads in new data and merges it. The rendering of the posts themselves happens in the Timeline component.

The Timeline renders pages of posts, and optionally shows a Load More button. It's used by the Posts component and SearchPage, both of which are responsible for the getting the post data to show. If a nextPage function is passed on props, we show a Load More button, which is a component I've spit out. I use a trick to render the button at the end of the array of posts, so that when you click it, it will get deleted and recreated at the end of the newly inserted posts (e.g., you don't lose your place anymore when clicking Load More).

There's more I could do, but I think this might be good enough to start with, and we can build on it.

NOTE: we need better UI error messages, which we can do in follow-ups.

@humphd humphd changed the title Experiment using swr and reworking Posts/Post loading Use swr and reworking Posts, Post, and Search loading Oct 20, 2020
Copy link
Member

@manekenpix manekenpix left a comment

Choose a reason for hiding this comment

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

A much needed refactor. Awesome!

Copy link
Contributor

@cindyorangis cindyorangis left a comment

Choose a reason for hiding this comment

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

wow, the posts load instantly now O_O

@humphd
Copy link
Contributor Author

humphd commented Oct 21, 2020

I filed #1220 on the error and loading handling, which I didn't do enough of here.

Copy link
Contributor

@raygervais raygervais left a comment

Choose a reason for hiding this comment

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

Love everything about this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: front-end area: performance Issues related to our performance
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Initial load times for content are horrible
5 participants