this keeps happening ...

Author: drcmda

.size-snapshot.json

@@ -5,8 +5,8 @@
     "gzipped": 2150
   },
   "dist/web.umd.js": {
-    "bundled": 87368,
-    "minified": 36167,
-    "gzipped": 12190
+    "bundled": 87346,
+    "minified": 36148,
+    "gzipped": 12177
   }
 }

examples/index.js

@@ -1,38 +1,31 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Transition, animated } from 'react-spring'
-
+import Loadable from 'react-loadable'
 import './styles.css'
 
-function Sub() {
-  return <div style={{ backgroundColor: 'pink', height: 100 }}>Hey</div>
-}
-
-class App extends React.Component {
-  state = { toggle: false }
-  handleClick = () => {
-    this.setState({ toggle: !this.state.toggle })
-  }
-  render() {
-    return (
-      <div className="App">
-        {this.state.toggle ? <div>true</div> : <div>false</div>}
-        <button onClick={this.handleClick}>button</button>
-        <Transition
-          from={{ opacity: 0, height: 0 }}
-          enter={{ opacity: 1, height: 'auto' }}
-          leave={{ opacity: 0 }}>
-          {this.state.toggle &&
-            (style => (
-              <animated.div style={{ ...style, background: 'orange' }}>
-                <Sub />
-              </animated.div>
-            ))}
-        </Transition>
-      </div>
-    )
-  }
-}
+const components = [
+  'scroll',
+  'parallax',
+  'nativespring',
+  'transitions',
+  'areas',
+  'trails',
+  'reveals',
+  'timing',
+  'sunburst',
+  'gestures',
+  'tree',
+  'morph',
+].map(path =>
+  Loadable({
+    loader: () => import('./demos/' + path),
+    loading: () => <div />,
+  })
+)
 
-const rootElement = document.getElementById('root')
-ReactDOM.render(<App />, rootElement)
+ReactDOM.render(
+  <div className="app-container">
+    {components.map((Component, i) => <Component key={i} />)}
+  </div>,
+  document.getElementById('root')
+)