2: React.lazy load HyloEditorMobile for code-splitting to improve load time in HyloApp

[lorenjohnson]

Remaining tasks:

• Remove store/dispatch dependency from mention and topic suggestions queries (this mobile editor bundle will not include the store). See notes to this regard in the related HyloApp ticket

Benefits:

• Reduces the size of hyloApp/editor / HyloEditorMobile load in HyloApp from ~2 MB to ~600k, which made a palpable difference in testing. It would be more important of a difference in the case of a poor or slow mobile data connection.

• Most likely we will also be creating a WebView for our ReactPlayer usage to get Video Emebeds working in the App. It will also want/need this top-level treatment: Make "Featured" LinkPreviews playable in App HyloReactNative#567

• A good and likely necessary first step towards moving the Mobile Editor code locally into the native app, which is where we ultimately should be (ref. Make HyloWeb HyloMobileEditor into a static local file HyloReactNative#572)

• Sets the stage for further lazy-loading / code-splitting down the line in the router.

Background:

We are currently using React.lazy and Suspense to delay load of the Notifications and Messages drop-downs and this extends that usage to the very top. Our previously somewhat woven-in SSR setup wouldn't have allowed us to use React.lazy in non-authed views (Suspense is not supported by React server rendering). The cleaned-up SSR setup in the branch this is based upon should remedy that such that App (which was clientRouter) now will only ever get rendered client-side.

[codecov]

Codecov Report

Base: 49.22% // Head: 49.11% // Decreases project coverage by -0.11% ⚠️

Coverage data is based on head (2b86996) compared to base (e4e8930).
Patch coverage: 7.50% of modified lines in pull request are covered.

Additional details and impacted files

@@                             Coverage Diff                             @@
##           HyloApp-544-add-group-explore-and-about    #1322      +/-   ##
===========================================================================
- Coverage                                    49.22%   49.11%   -0.12%     
===========================================================================
  Files                                          539      538       -1     
  Lines                                        12029    12058      +29     
  Branches                                      3444     3451       +7     
===========================================================================
+ Hits                                          5921     5922       +1     
- Misses                                        6108     6136      +28     

Impacted Files	Coverage Δ
src/components/HyloEditor/HyloEditor.js	1.42% <ø> (+0.02%)	⬆️
src/index.js	0.00% <0.00%> (ø)
src/router/index.js	0.00% <ø> (ø)
src/util/graphql.js	20.83% <6.25%> (-29.17%)	⬇️
...components/HyloEditor/extensions/PeopleMentions.js	5.00% <25.00%> (-0.27%)	⬇️
.../components/HyloEditor/extensions/TopicMentions.js	4.16% <25.00%> (-0.19%)	⬇️
src/store/middleware/optimisticMiddleware.js	90.90% <0.00%> (-9.10%)	⬇️
src/routes/GroupWelcomeModal/GroupWelcomeModal.js	95.00% <0.00%> (-5.00%)	⬇️
...er/Signup/FinishRegistration/FinishRegistration.js	90.32% <0.00%> (+6.45%)	⬆️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[thomasgwatson]

Oh are we still specifically importing fetch? I think I used it 'raw' in a reactions PR... which might be a gap on older browsers (has fetch crossed the line into availability??)

[thomasgwatson]

ahh, this file can run on both front and backends....

[tibetsprague]

so it this no longer a Draft?

[lorenjohnson]

It likely needs to have dev merged-up and make sure things are still happy, but yeah it should be good.