Lazy load routes + error and loading component states

[jameslindfors]

PR Handles:

• Lazy loading all registered routes
• Adds suspense with fallback component for loading routes
• Adds Error boundary to handle errors when page loading
• Addresses issue Code-Splitting frontend routes #92

Fixes:

• Moved "colors" to fix overriding all other tailwind color presets in tailwind.config
• Added .eslintcache to .gitignore to ignore cache files

[KHVBui]

Images for reference:
LoadingState component that appears when waiting for routes (part of Suspense)

ErrorState component that appears when rendering errors occur and trigger an error boundary

[KHVBui]

The "Try again" button currently does not try to re-render the page (which is what I expect the behavior should be).
Clicking on it DOES set the error state to "false", but nothing else happens.

Recommendations:

• Add a small animation to indicate to the user that the button was actually clicked.
• Possibly use "onReset" in order to force a re-render.
  https://github.com/bvaughn/react-error-boundary/blob/master/README.md

[jameslindfors]

I added some more styles to the button to make it a little more apparent when it's clicked. Let me know if you think I should try and work out an animation for it instead.

I double checked the error boundary and it seems to be working for me. The code that I used to test it is below. I'm not sure there's a way to test it outside of being called in the ErrorBoundary without simulating the error and what ErrorBoundary is doing.

// Add to useEffect of any page to simulate a random page mount error.

const randNum = Math.floor(Math.random() * 10);

if (randNum >= 5) {
	throw new Error("Random Error");
}

I don't know if theres a good way to "reset" all the routes other than just attempting to rerender them. I believe the onReset() is for when components are wrapped in ErrorBoundary and have a state that can be reset. I'll do some research and see what I can find. In the meantime I think just attempting to re-render the component is fine since it'll most likely be a network error causing the component to fail.

[minhngo3818]

I tried to reproduce the non-rendering case. It seem that page components were rendered as James said. Latest components in the picture seem to be rendered after Try Again was clicked. It's weird to know that page components were not rendered in Kevin's case.

But, I found an issue with proptype. The error prop is supposed to be Object.

[jameslindfors]

I've never used prop types for type checking before so please let me know if there is a better way to do this:
When I was using proptypes.object.isRequired I got a "object prop type is forbidden" from lint. I'm using shape now and nesting a property "message" of type string inside and it seems to have gotten rid of the error.
PropTypes.shape({ message: PropTypes.string.isRequired }).isRequired

[KHVBui]

I think PropTypes.shape works fine!

After testing with your code that forces the error, it looks like the button does re-render properly. What was likely happening in my case was that I forced the error prop to be true, and the button set it to false instead of null, and it looks only the null state results in a re-render. That's probably fine for our purposes, so no further changes for that necessary.

Regarding the style for button pressing, I think it's good! The only problem is that after clicking on it, it doesn't return to its original state, but rather a different state. You can clear it by clicking on a different part of the screen, but that's not ideal.

Suggest: After pressing the button, it should return to original appearance.

Original appearance before pressing:

After pressing:

[minhngo3818]

Codes are straightforward and you fixed proptypes so everything is good to me.

I just have one suggestion that when user click on try again, loading state will appear, then page components are rendered if succeed. If it's failed to load, it goes back to error state again.

I think the feature is quite popular in many websites. If you think it requires complex codes then it will be in a separate PR.

Please solve conflicts before merging.

[jameslindfors]

@KHVBui I am not able to reproduce the button focus state issue unless I have the dev tools open with the react component extension open. If dev tools are closed after clicking the button it returns to the original state both in dev and build. What browser/system are you using so I can try to reproduce the issue on that? I suspect it's a tailwind issue because I'm using "focus" for the active state.

tailwind focus state

@minhngo3818 I think the best way to have a loader for page rerender would be to wrap the whole page (event.jsx, etc.) in suspense and use the loading state component as the fallback ui. I believe that it would be redundant to add a loading state to the error boundary since it's already wrapping a suspense loading state. If that's how we decide to proceed I think it would be best to make an issue "suspense and error boundary each page" or something along those lines. Instead, I recommend we do it per component since we’re already suspending the page when it's created. That way when each component gets rendered it will have an independent loading state and also an error boundary.

I will address the merge conflicts in my next commit once I fix the active state issue Kevin mentioned.

[KHVBui]

Okay yeah I'm a dummy, I definitely had my dev tools open when I had that problem. It works perfectly fine! You're good to go for me.

[minhngo3818]

@jameslindfors, separating loading for individual components sounds good to me. It looks like there are two issues for separate components are on github, so I will adjust details with error boundary and loading state. Some more issues related to loading for other components will be added if needed.

Alright! Everything is all set.