search

acekyd / made-in-nigeria

Here is a curation of awesome tools built by Nigerians that can be used by anybody and from anywhere in the world.
https://madeinnigeria.dev
1.01k stars 401 forks source link

Page transitions currently too slow in V2 #270

Closed acekyd closed 8 months ago

acekyd commented 9 months ago

No idea why yet - but definitely needs looking into.

kaf-lamed-beyt commented 9 months ago

About this, I think one would probably revert to using the Link component from Chakra as is, without the as prop that points to NextLink. Just that we'd have the page refresh thing back again. But, I guess that's okay.

Or better still, use the Link component from Next, and to accommodate external links we might just wrap/conditionally render an anchor tag with a target="_blank" property.

acekyd commented 8 months ago

Can you help experiment with this to see if there are any improvements across the site? @kaf-lamed-beyt

kaf-lamed-beyt commented 8 months ago

Awesome! I'll do so and let you know how it goes @acekyd

kaf-lamed-beyt commented 8 months ago

Hi @acekyd,

Navigating seems normal — but, I have to wait for a full reload — on all the routes except the projects route. Two things I think could be the cause of this are:

There's this hook — React.useTransition() — that kinda gave me an idea of what the problem is. But, we can't exactly use it to "defer" or unblock the UI in our case here. We actually want the page to render as soon as we click on it's nav item.

So one solution I thought of is to somehow introduce a limit to the amount of projects we show on initial render. It is quite similar to this convention used in REST and GraphQL APIs. Something like appending a query param in request URL

https://api.madein9ja.dev/v1/projects?limit=20

We could then decide to either add pagination or use an infinite scroll approach. Or better still, a "load more" button that returns a specified amount of projects.

kaf-lamed-beyt commented 8 months ago

perhaps arr.slice(start, end) could work in this case too. I'm not so sure.

acekyd commented 8 months ago

We get all the data in one API request since we are reading a remote file. Can we try the infinite scroll approach by filtering data we already have using the approach you created? That should reduce render time for that page. @kaf-lamed-beyt

kaf-lamed-beyt commented 8 months ago

Yes, that should be possible. I'll keep you posted @acekyd.