Add basic server loading page

[hughess]

Description

Adds a loading page immediately after server start, which redirects to the Evidence app once it is ready.

Note: this branch started from the hmr error branch, so probably easier to start fresh if we decide to implement this

Uses a proxy server on port n+1 to achieve this.

E.g., run npm run dev in your Evidence project:

• It starts the dev server on port 3000 (if available, otherwise increment up by 1)
• It serves a loading page found at @evidence-dev/evidence/static/loading.html on port 3001
• Once the app is ready, it automatically redirects from port 3001 to port 3000

New dependencies

• get-port - checks availability of ports and increments from 3000 up to 3005, then to random available port (rather than relying on vite to do this for us)
• ora - if we decide to go for enhanced terminal feedback
• http-proxy and open - for proxy server

Concerns

• Potential flakiness of proxy server - it has felt solid in testing, but it's another layer where something could go wrong/get delayed
• Does is slow down the loading process significantly? A slight slowdown may be worth it in order to show loading feedback rather than blank browser window

To do if this approach is feasible

• Set up loading page design/animation
• Consider a fade-in animation by default for evidence projects in dev mode - can coordiante with fade out animation of loading screen for a smooth transition
• Should the loading page be a skeleton evidence app?
  • Issue here would be needing to respect styling/layout customizations in a user's evidence project so they don't get a stock evidence project as loading screen, then redirect to styled app
• [nice to have] Enhanced terminal feedback - we should be able to get a flag back when the app is loaded, which we could use to update the terminal logs (e.g., "starting evidence server" --> "evidence server running"

Example custom console feedback

Would need to reincorporate our typical console logs as well - this is a rough approach:

Checklist

• [ ] For UI or styling changes, I have added a screenshot or gif showing before & after
• [ ] I have added a changeset
• [ ] I have added to the docs where applicable

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: f19fa8e6808843fedadfc273f54552e7c474f71b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@evidence-dev/component-utilities	Minor
@evidence-dev/core-components	Minor
@evidence-dev/components	Minor
@evidence-dev/evidence	Major
evidence-test-environment	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 24, 2024 10:39pm

[netlify[bot]]

✅ Deploy Preview for evidence-development-workspace ready!

Name	Link
🔨 Latest commit	f19fa8e6808843fedadfc273f54552e7c474f71b
🔍 Latest deploy log	https://app.netlify.com/sites/evidence-development-workspace/deploys/65da6fd6b9644d0008973413
😎 Deploy Preview	https://deploy-preview-1634--evidence-development-workspace.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 configuration.

[archiewood]

I assume this is not ready?

[hughess]

Closing in favour of #1685