Stabilize HTML build outputs

[fturmel]

Some additional improvements to build/deploy performance.

It's been bothering me that the Netlify build often needs to redeploy thousands of files for no apparent reason after merging PRs that often don't change much. I've been diffing build outputs to understand why.

• the react-select component library increments element ids internally by default. This is causing a problem because Gatsby builds using parallel worker threads that execute in an unpredictable order, so a page will very likely end up with a different select component id between each build. Explicitly setting the instanceId prop fixes the problem.
  https://github.com/JedWatson/react-select/blob/c350a124f8de853a79e0158578d438a35e67e63e/packages/react-select/src/Select.tsx#L638-L639

• the TopBar component that displays today's date is captured in HTML during the build phase. It creates some visual flickering because the date in the markup is often not the same as after hydration. It also forces every HTML page to be redeployed on a new build if the last build didn't happen on the same date (UTC). This PR only displays the date after React hydration to address the problem.

topbar-date-flicker.mp4

• Migrating to Gatsby 5([chore] Gatsby 5 migration, deps upgrade and minor fixes #818) seem to have helped a bit too, but there's one remaining issue I've been tracking down where the only thing changing between a clean build and the following incremental build is the webpackCompilationHash value. See First incremental build rebuilds all HTML pages gatsbyjs/gatsby#33450. The fix was a breaking change for Gatsby 4 and was supposed to be rolled out in v5 - but I think it might've slipped. Not much we can do about this for now.

[netlify]

✅ Deploy Preview for codingtrain ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	15267aa
🔍 Latest deploy log	https://app.netlify.com/sites/codingtrain/deploys/6393521d6a2f6000088a7b96
😎 Deploy Preview	https://deploy-preview-826--codingtrain.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[shiffman]

I've checked this through and the deploy preview seems to be working great! Tagging @runemadsen just as an FYI, but I'm going to go ahead and merge!

[runemadsen]

Lovely!