React snap loadable components

README.md

@@ -44,7 +44,6 @@ You can find more information [here](https://github.com/facebookincubator/create
 ## TODO
 
 - Migrate structure to be similar to cra-universal, to be able compare react-snap and cra-universal.
-- `react-loadable` triggers redraw, see [images/visual-progress.png](images/visual-progress.png)
 - [perfect 404](https://alistapart.com/article/perfect404)
 - placeholder examples: [overview](https://medium.freecodecamp.org/using-svg-as-placeholders-more-image-loading-techniques-bed1b810ab2c), [lqip](https://github.com/zouhir/lqip), [sqip](https://github.com/technopagan/sqip), [dominant color](https://github.com/lokesh/color-thief), [cloud off icon](https://material.io/icons/#ic_cloud_off), [react-waypoint](https://github.com/brigade/react-waypoint), [offline states](https://material.io/guidelines/patterns/offline-states.html)
 - try out [workbox](https://github.com/GoogleChrome/workbox) instead of sw-precache, explore options for offline storages, explore offline reporting for GA

package.json

@@ -7,7 +7,7 @@
     "level": "^2.0.1",
     "prettier": "^1.8.2",
     "react-scripts": "^1.0.17",
-    "react-snap": "1.0.5",
+    "react-snap": "^1.1.1",
     "readdirp": "^2.1.0",
     "s3-sync-aws": "^1.1.1",
     "sw-precache": "^5.2.0",
@@ -20,18 +20,20 @@
     "react": "^16.1.1",
     "react-dom": "^16.1.1",
     "react-helmet": "^5.2.0",
-    "react-loadable": "^5.3.1",
     "react-router-dom": "^4.2.2",
+    "loadable-components": "^0.4.0",
     "styled-components": "^2.2.3"
   },
   "scripts": {
     "start": "react-scripts start",
     "build-react": "react-scripts build",
     "build-preact": "node scripts/build-preact.js",
-    "build": "yarn run build-react && react-snap && yarn run generate-sw && yarn run generate-appcache",
+    "build":
+      "yarn run build-react && react-snap && yarn run generate-sw && yarn run generate-appcache",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
-    "generate-sw": "sw-precache --root=build --config scripts/sw-precache-config.js && uglifyjs build/service-worker.js -o build/service-worker.js",
+    "generate-sw":
+      "sw-precache --root=build --config scripts/sw-precache-config.js && uglifyjs build/service-worker.js -o build/service-worker.js",
     "generate-appcache": "node scripts/generate-appcache",
     "aws-deploy": "node scripts/aws-deploy.js",
     "deploy": "yarn run build && firebase deploy",
@@ -40,10 +42,8 @@
   "reactSnap": {
     "cacheAjaxRequests": true,
     "inlineCss": true,
-    "asyncScriptTags": true,
+    "asyncScriptTags": false,
     "removeStyleTags": false,
-    "include": [
-      "/shell.html"
-    ]
+    "include": ["/shell.html"]
   }
 }

src/App.js

@@ -1,27 +1,23 @@
 import React, { Component } from "react";
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import { Route, Switch } from "react-router-dom";
 import Helmet from "react-helmet";
 import Wrapper from "./components/Wrapper";
 import Title from "./components/Title";
 import Nav from "./components/Nav";
 import NavLink from "./components/NavLink";
-import Loadable from "react-loadable";
+import loadable from "loadable-components";
 
-const Home = Loadable({
-  loader: () => import("./views/Home"),
-  loading: () => null
+const Home = loadable(() => import("./views/Home"), {
+  LoadingComponent: () => null
 });
-const About = Loadable({
-  loader: () => import("./views/About"),
-  loading: () => null
+const About = loadable(() => import("./views/About"), {
+  LoadingComponent: () => null
 });
-const Countries = Loadable({
-  loader: () => import("./views/Countries"),
-  loading: () => null
+const Countries = loadable(() => import("./views/Countries"), {
+  LoadingComponent: () => null
 });
-const NoMatch = Loadable({
-  loader: () => import("./views/NoMatch"),
-  loading: () => null
+const NoMatch = loadable(() => import("./views/NoMatch"), {
+  LoadingComponent: () => null
 });
 
 const title = "You Are Doing Great";
@@ -81,27 +77,29 @@ class App extends Component {
 
   render() {
     return (
-      <Router>
-        <Wrapper>
-          <Helmet titleTemplate={`%s - ${title}`} />
-          <Title>YADG</Title>
-          <Nav>
-            <h1>Navigation</h1>
-            {routes.map((route, i) => (
-              <NavLink
-                key={i}
-                {...route}
-                reload={this.state.serviceWorkerState === "new"}
-              />
-            ))}
-          </Nav>
-          <Switch>
-            {routes.map((route, i) => <Route key={i} {...route} />)}
-            <Route key={"/shell.html"} path="/shell.html" component={() => null} />
-            <Route key={"/404.html"} component={NoMatch} />
-          </Switch>
-        </Wrapper>
-      </Router>
+      <Wrapper>
+        <Helmet titleTemplate={`%s - ${title}`} />
+        <Title>YADG</Title>
+        <Nav>
+          <h1>Navigation</h1>
+          {routes.map((route, i) => (
+            <NavLink
+              key={i}
+              {...route}
+              reload={this.state.serviceWorkerState === "new"}
+            />
+          ))}
+        </Nav>
+        <Switch>
+          {routes.map((route, i) => <Route key={i} {...route} />)}
+          <Route
+            key={"/shell.html"}
+            path="/shell.html"
+            component={() => null}
+          />
+          <Route key={"/404.html"} component={NoMatch} />
+        </Switch>
+      </Wrapper>
     );
   }
 }

src/index.js

@@ -3,15 +3,30 @@ import { hydrate, render } from "react-dom";
 // import { render } from 'react-dom';
 import App from "./App";
 import "./index.css";
-import registerServiceWorker from "./registerServiceWorker";
+import registerServiceWorker, { unregister } from "./registerServiceWorker";
+import { BrowserRouter } from "react-router-dom";
+
+import { loadComponents } from "loadable-components";
+
+import { getState } from "loadable-components/snap";
+window.snapSaveState = () => getState();
+
+const AppWithRouter = (
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
+);
 
 const rootElement = document.getElementById("root");
+
 if (rootElement.hasChildNodes()) {
-  hydrate(<App />, rootElement);
+  loadComponents().then(() => {
+    hydrate(AppWithRouter, rootElement);
+  });
 } else {
-  render(<App />, rootElement);
+  render(AppWithRouter, rootElement);
 }
 
 // render(<App />, rootElement);
-
-registerServiceWorker();
+// registerServiceWorker();
+unregister();