search

chec / commercejs-nextjs-demo-store

Commerce demo store built for the Jamstack. Built with Commerce.js, Next.js, and can be one-click deployed to Netlify. Includes product catalog, customer login, categories, variants, cart, checkout, payments (Stripe) order confirmation, and printable receipts.
https://commercejs-demo-store.netlify.app/
BSD 3-Clause "New" or "Revised" License
1.07k stars 206 forks source link

Add loading indicator while product display page is being loaded #142

Closed robbieaverill closed 3 years ago

robbieaverill commented 3 years ago

Notice there is a second or two while the product information loads that nothing happens in the UI. We could put a loading indicator somewhere to show that something is happening.

notrab commented 3 years ago

Edit: Are you referring to dev or production? Dev will await responses from the API, but the built pages won't ever see this because they statically built.

@robbieaverill I would imagine this is happening because you're opting out of static optimization by using getInitialProps in _app.js.

You should remove getInitialProps from _app.js, and since this is being served via Netlify, you'll want to also use next-on-netlify to get the most benefit out of serverless mode.

Next are working on making getStaticProps work inside of _app.js but I've rarely found the need for it even so.

The requests you have currently for categories can go into the header, or whatever component is requesting them inside useEffect.

robbieaverill commented 3 years ago

Thanks for that @notrab! We're aiming for this repo to be hosted on Netlify and Vercel, so we can archive the Vercel copy of this repo. Would next-on-netlify cause issues for Vercel?

robbieaverill commented 3 years ago

Ah yes, maybe it's only a dev mode thing - if so we can probably close this

notrab commented 3 years ago

@robbieaverill Sweet. You could have a build script for netlify build:netlify which runs that dependency, and keep the regular build for Vercel. Like you say, no need for a fork if it's the deployment target that is only to change.

jaepass commented 3 years ago

Actually looks like all the product display pages [permalink].js are generated as static pages using getStaticProps. I don't see a hang when loading in production but could just be me? maybe a bit for the carousel images so can add a loaded there?

robbieaverill commented 3 years ago

Yeah @notrab was right, it's a dev-only thing, happy to close