How to use the react-use.useAsync function in react-use

function useConfigLoader(
  configLoader: AppConfigLoader | undefined,
  components: AppComponents,
  appThemeApi: AppThemeApi,
): { api: ConfigApi } | { node: JSX.Element } {
  // Keeping this synchronous when a config loader isn't set simplifies tests a lot
  const hasConfig = Boolean(configLoader);
  const config = useAsync(configLoader || (() => Promise.resolve([])));

  let noConfigNode = undefined;

  if (hasConfig && config.loading) {
    const { Progress } = components;
    noConfigNode = <progress>;
  } else if (config.error) {
    const { BootErrorPage } = components;
    noConfigNode = ;
  }

  // Before the config is loaded we can't use a router, so exit early
  if (noConfigNode) {
    return {
      node: (
        </progress>

export default () => {
  const { error, loading, value } = useAsync(fetchLeaderboard);
  return (
    <div id="leaderboard">
      <h2>Top Referrers</h2>
      {/* <p>Get referrals from the biggest names in the community.</p> */}
      {value ? (
        
            {value.map(ref =&gt; (
              <table>
          <thead>
            <tr>
              <th>
              </th><th>Impressions</th>
              <th>Clicks</th>
            </tr>
          </thead>
          <tbody><tr></tr></tbody></table></div>

export function AsyncWaiter({
  children,
  fn,
  loadingProps = {},
  sizeClass,
}: {
  children?: any;
  fn: Fn;
  loadingProps?: any;
  sizeClass?: string;
}) {
  if (!fn) {
    throw new Error(`Function passed to AsyncWaiter must not be falsey`);
  }

  const state = useAsync(fn as any);
  const { error, loading, value } = state;

  if (error) {
    throw error;
  }

  if (loading) {
    return (
      <div>
        
      </div>
    );
  }

  return children({ value });
}

export default () => {
  const state: any = useAsync(getUser)
  return (
    <div>
      
        
        
            !state.loading &amp;&amp; state.value != null &amp;&amp; state.value.access_token != null ? (
              
            ) : (
              
            )</div>

archiveProject,
    authenticationStore: { signedIn },
    createProject,
    deleteProject,
    projectsStore: { archivedProjects, currentProject, projects },
    tasksStore: { doneTasks, todoTasks },
    initialize,
    repositoryURL,
    signIn,
    signOut,
    switchCurrentProject,
    unarchiveProject,
    updateProject,
    ...props
  }: IProps) => {
    useAsync(initialize, []);
    const [projectsShown, setProjectsShown] = useState(false);

    return signedIn && !projectsShown ? (
       setProjectsShown(true)}
        signOut={signOut}
        todoTasks={todoTasks}
      />
    ) : signedIn ? (

const SourceCodeView = (props: { url: string }) => {
    const code = useAsync(() => new Promise((resolve, reject) => {
        request.get(
            props.url,
            (err, resp, body) => err ? reject(err) : resolve(body));
        }
    ))

    let codeString = ''
    if (code.loading) {
        codeString = `Loading code sample from: ${props.url}`;
    } else if (code.error) {
        codeString = `Failure to load code sample from: ${props.url} (${code.error.toString()})`;
    } else {
        codeString = code.value ? code.value.toString() : `Failure to load code sample from: ${props.url}`;
    }

    return (