suspenseDemo.js

// Import Suspense and lazy from React
import React, { Component, Suspense, lazy } from 'react'
import axios from 'axios'
import styled from 'styled-components'
import { Container, Row, Col } from 'react-grid-system'

import { SearchBar } from './components/SearchBar'
import { SearchInput } from './components/SearchInput'

// Dynamically import the file 
// you don't want to load until later
const Repos = lazy(() => import('./Repos'))

class App extends Component {
   // Some lifecycle and class methods here

  render () {
    const { value } = this.state
    return (
      <Container>
        <div className='App'>
          // Search Bar Code
          {this.state.loading
            ? <Row>
               // Fetching data message
            </Row>
            : <Row>
              <Col sm={12} md={2}>
                {this.state.profile
                    ? <h1>{this.state.profile.login}</h1>
                    : null}
              </Col>
              <Col sm={12} md={10}>
                // Here is where we actually use React.lazy
                // We check to make sure the data came back from the API
                // Then we wrap the component that's being dynamically
                // imported in `<Suspense />` and provide a fallback
                // component
                {this.state.repos.length > 0
                    ? <Suspense fallback={<Blurred />}>
                      <Repos repos={this.state.repos} />
                    </Suspense>
                    : null}
              </Col>
            </Row>}
        </div>
      </Container>
    )
  }
}

export default App

Thanks for the example! 🤩