Make the "Loading" view configurable

[PWAStudioBot]

From @zetlen on May 26, 2018 6:51

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:

Copied from original issue: magento-research/peregrine#40

[pcvonz]

Can I look into this?

[zetlen]

But of course, @pcvonz !

[pcvonz]

Separated the MagentoRouter and added the ability to pass in a React component which will display when the component is loading. Let me know if this is the right direction! https://github.com/pcvonz/pwa-studio/tree/custom-loader

[ericerway]

Let's queue this up for grooming on Friday and include the new splash screen from @soumya-ashok -- thanks everyone!