Members

[GMSoudersJr]

Centered Content

• Looks a bit off with only 5 members, but should look better as more members are added.

Consistent Font-Size

• Events page now has same font-size for its first element as the other pages.

[GMSoudersJr]

The latest commit is my failed attempt at displaying a loading indicator.

[GMSoudersJr]

I tried both getStaticProps and getServerSideProps. Both did the same thing as far as I could tell. I must have implemented something wrong.

[ivanms1]

could you try the following?

• use getStaticProps
• remove suspense
• yarn build
• yarn start

do you still see a loading? it should be instant now

[GMSoudersJr]

Thanks for the feedback.

The issue I have

• Click on Members tab in the navbar.
• No indication that I clicked.
  • <p>Loading...</p> does not show.
• A few seconds later, the page loads with data from the spreadsheet.
• Every navigation to Members takes a few seconds without an indicator for the user.
• If the spreadsheet is updated, the next navigation to Members shows the update, but as always, it takes a few seconds.
• I figure it will always take a while to run through the spreadsheet and create the JSON for the the API.
• That's why I think an indicator of some type is necessary.

With your suggestion

• The page loads immediately with data from the spreadsheet 👍
• However, if the spreadsheet is changed, the website does not get the updated information. (It only gets the information at build time, correct?)

How often do we want the member list to update?

[ivanms1]

However, if the spreadsheet is changed, the website does not get the updated information. ?

You are correct

IngetServerSideProps the fetch of the members blocks the rendering of page until that call is done, that's why suspense didn't work.

It looks like we have a couple of options

1. Use getStaticProps. There is a revalidate option for getStaticProps but I am not sure if it works in fly.io. In the worst case scenario we would have redeploy often, maybe every Sunday?

2. Move the loading logic to _app.tsx and do something similar to this. I am not a big fan of this.

3. Move the member fetching logic to the client side (Members Page Component) and use something like react query or just plain fetch.

[GMSoudersJr]

So when would Suspense actually work? I'm confused.

1. I think this is the best option. We can always test it. And like you said

   worst case scenario, we would have to redeploy often...

   • I tested revalidate with a short interval on a local build and it worked fine

2. Seems like a bit much. I am also not a fan of that.
3. Maybe a last resort.

[GMSoudersJr]

Does fly.io stop revalidation? How does the homepage stay current?

[ivanms1]

let's do option 1 then

Does fly.io stop revalidation?

I am not sure, I can't find any sources stating that it does or it doesn't. I think we can just test it.

How does the homepage stay current?

It's using getServerSideProps

[GMSoudersJr]

getServerSideProps that's right. 바보야! I knew that

[GMSoudersJr]

I shared the Google Sheet with you

[ivanms1]

Cool, I'll review this later today, we don't need the loading component anymore right?

[GMSoudersJr]

Loading removed

[GMSoudersJr]

Thanks. And thanks for the feedback