Make the "Loading" view configurable

[zetlen]

This issue is a:

[ ] Bug [x] Feature suggestion [ ] Other

Description:

MagentoRouter renders a hardcoded "Loading" view while it is resolving the route. This must be configurable by the developer.

Environment and steps to reproduce

OS: Any

Magento 2 version: Any

Steps to Reproduce:

1. Configure a PWA with Peregrine, Buildpack, and a Magento 2 store.
2. Launch the development server with npm start.
3. Observe the hardcoded and unstyled "Loading...".

Expected result:

A loading screen of your choosing while the URL resolves.

Possible solutions:

Currently, MagentoRouter is private. The Peregrine constructor imports and uses it directly as the child of the Redux Provider.

• We could separate the Router from Peregrine, and make a configuration option for "provider children", where the developer might supply a router in a render callback.

  • This makes Peregrine into essentially a thin wrapper around Redux.
  • Routing is fundamental to our architecture, so this seems wrong.

• We could separate MagentoRouter from the Peregrine implementation, expose it directly as a Peregrine component, and make a Peregrine config option for "router implementation", which the developer might supply in a render callback (or just a Router constructor which satisfies a certain prop interface!)

  • MagentoRouter could add a loadingView prop which takes a Component constructor
  • MagentoRouter could accept a loading view which takes a render callback, with props about loading progress

• We could leave Peregrine and MagentoRouter tightly coupled and thread the configuration for MagentoRouter through Peregrine's external API.

  • This would be simplest
  • This tightly couples Peregrine to Magento, which we wanted to avoid.

Additional information:

[PWAStudioBot]

This issue was moved to magento-research/pwa-studio#14