jpgorman

async function getComponent() {
   const {default: module} = await import('../some-other-file')
   const element = document.createElement('div')
   element.innerHTML = module.render()
   return element
}

jpgorman

import {eventChannel, END} from 'redux-saga'

function createUploaderChannel(key, files){
  return eventChannel(emit => {
    
    const onProgress = ({total, loaded}) => {
      const percentage = Math.round((loaded * 100) / total)
      emit(percentage)
    }  
   

jpgorman

class DataProvider extends React.Component { 
  getChildContext() {
    // we're omitting children from our props and passing all other props into context
    const {children, ...rest} = this.props 
    return {
      // we'll default to an empty object
      state: rest || {}
    };
  }
  

jpgorman

class IsLoading extends React.Component {
    constructor(props) {
        super(props)
        this.state = { isLoading: false }
    }
    async componentDidCatch(err) {
        if (err instanceof Promise) {
            this.setState({ isLoading: true }) 
            await err
            this.setState({ isLoading: false })

jpgorman

// AsyncComponent.js
function mapStateToProps(state: IState) {
    return {
        data: waitForData(),
    }
}
const AsynCompoment = connect(mapStateToProps)(({ data }) => <div>{console.log(data)}</div>)

// store.js
const waitForData = createWaiter(store, (state) => state.data)

jpgorman

class AsyncComponent extends React.Component { 
  componentDidMount() {
    // use the context
    if(!this.context.state.foo) 
      dataFetcher();
   }
... 
}

AsyncComponent.contextTypes = { 

jpgorman

class IsLoading extends React.Component { 
  constructor(props) {
    super(props);
    // initialise our state
    this.state = { isLoading: false };
  }
  
  componentDidCatch(error, info) {
    // if we have a promise then we can deal with it
    if(error instanceof Promise) {

jpgorman

<div class="perspective">
	<div class="bar cyan" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100">
		<div class="bar-face roof percentage"></div>
		<div class="bar-face back percentage"></div>
		<div class="bar-face floor percentage"></div>
		<div class="bar-face left"></div>
		<div class="bar-face right"></div>
		<div class="bar-face front percentage"></div>
	</div>
</div>