Adds example higher-order component

package.json

@@ -9,7 +9,7 @@
   },
   "scripts": {
     "setup": "typings install",
-    "start": "http-server",
+    "start": "http-server -c-1",
     "build": "npm run setup && npm run test && webpack",
     "watch": "webpack --watch",
     "lint": "tslint -c tslint.json 'src/**/*.{ts,tsx}'",

src/components/__tests__/__snapshots__/counter_spec.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/Counter renders 1`] = `
-<CounterComponent
+<Loadable(PureCounter)
   counter={
     Object {
       "value": 0,

src/components/counter.tsx

@@ -10,6 +10,8 @@ import {
 
 import { Store } from '../reducers'
 
+import loadable from '../decorators/loadable'
+
 type OwnProps = {
 }
 
@@ -42,7 +44,7 @@ const mapDispatchToProps = (dispatch: redux.Dispatch<Store.All>): ConnectedDispa
     dispatch(saveCount({ value })),
 })
 
-class CounterComponent extends React.Component<ConnectedState & ConnectedDispatch & OwnProps, {}> {
+class PureCounter extends React.Component<ConnectedState & ConnectedDispatch & OwnProps, {}> {
 
   _onClickIncrement = (e: React.SyntheticEvent<HTMLButtonElement>) => {
     e.preventDefault()
@@ -86,5 +88,12 @@ class CounterComponent extends React.Component<ConnectedState & ConnectedDispatc
   }
 }
 
+const isLoading = (p: ConnectedState & ConnectedDispatch & OwnProps) =>
+  p.isLoading || p.isSaving
+
+// Invoke `loadable` manually pending decorator support
+// See: https://github.com/Microsoft/TypeScript/issues/4881
+const LoadableCounter = loadable(isLoading)(PureCounter)
+
 // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/8787
-export const Counter: React.ComponentClass<OwnProps> = connect(mapStateToProps, mapDispatchToProps)(CounterComponent)
+export const Counter = connect(mapStateToProps, mapDispatchToProps)(LoadableCounter)

src/decorators/__tests__/__snapshots__/loadable_spec.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`decorators/loadable maps props to loading 1`] = `<TestComponent />`;

src/decorators/__tests__/loadable_spec.tsx

@@ -0,0 +1,26 @@
+// tslint:disable-next-line no-unused-variable
+import * as React from 'react'
+import * as TestUtils from 'react-dom/test-utils'
+import * as ReactShallowRenderer from 'react-test-renderer/shallow'
+
+import loadable from '../loadable'
+
+const TestComponent = () => <div>OK</div>
+const LoadableTestComponent = loadable(props => props.isLoading)(TestComponent)
+
+describe('decorators/loadable', () => {
+
+  it('sets friendly .displayName', () => {
+    expect(LoadableTestComponent.displayName)
+      .toEqual('Loadable(TestComponent)')
+  })
+
+  it('maps props to loading', () => {
+    const renderer = new ReactShallowRenderer()
+    expect(renderer.render(<LoadableTestComponent isLoading />).props.children)
+      .toEqual('Just a moment, please...')
+
+    expect(renderer.render(<LoadableTestComponent />))
+      .toMatchSnapshot()
+  })
+})

src/decorators/loadable.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+export default function loadable<P>(isLoading: (p: P) => boolean) {
+  return (C: React.ComponentClass<P>|React.SFC<P>): React.SFC<P> => {
+    const LoadableComponent: React.SFC<P> = (props) => {
+      if (isLoading(props)) {
+        return <div>Just a moment, please...</div>
+      }
+      return <C {...props} />
+    }
+
+    // Set pretty `displayName` for dev tooling
+    LoadableComponent.displayName = `Loadable(${C.name})`
+    return LoadableComponent
+  }
+}