App.tsx

import React, { FC } from 'react'
import { SWRConfig } from 'swr'
import axios from 'axios'

import { ProfileContainer } from './ProfileContainer'
import './App.css'

const fetcher = (url: string) =>
  axios(url).then(
    response =>
      new Promise(resolve =>
        setTimeout(() => {
          resolve(response)
        }, 1000),
      ),
  )

const App: FC = () => (
  <SWRConfig
    value={{
      fetcher,
      suspense: true,
    }}
  >
    <div className="App">
      <h1>Profile</h1>
      <ProfileContainer />
    </div>
  </SWRConfig>
)

export { App }

ProfileContainer.tsx

import React, { FC, Suspense } from 'react'

import { ProfileData } from './ProfileData'

const ProfileContainer: FC = () => (
  <Suspense fallback="loading...">
    <ProfileData />
  </Suspense>
)

export { ProfileContainer }

ProfileData.tsx

import React, { FC } from 'react'
import useSWR from 'swr'
import './ProfileData.css'

const ProfileData: FC = () => {
  const { data } = useSWR('https://api.github.com/users/toruticas')

  return (
    <div className="ProfileData">
      <img
        alt={data?.data?.name}
        src={data?.data?.avatar_url}
        style={{ height: 260, width: 260 }}
      />
      <h2>
        {data?.data?.name}
        <br />
        <small>{data?.data?.login}</small>
      </h2>
      <p>{data?.data?.bio}</p>
    </div>
  )
}

export { ProfileData }