How to use the react-redux-firebase.isLoaded function in react-redux-firebase

function Navbar() {
  const classes = useStyles()

  // Get auth from redux state
  const auth = useSelector(state => state.firebase.auth)
  const authExists = isLoaded(auth) && !isEmpty(auth)

  return (
    <NavbarWithoutAuth brandPath={authExists ? LIST_PATH : '/'}>
      {authExists ? (
        <AccountMenu />
      ) : (
        <Button
          className={classes.signIn}
          component={Link}
          to={LOGIN_PATH}
          data-test="sign-in">
          Sign In
        </Button>
      )}
    </NavbarWithoutAuth>
  )

withProps(({ auth, profile }) => ({
    authExists: isLoaded(auth) && !isEmpty(auth)
  })),
  // Flatten profile so that avatarUrl and displayName are props

componentDidUpdate(prevProps: Props) {
        const { auth, navigation } = this.props;
        if (auth !== prevProps.auth) {
            if (isLoaded(auth) && !isEmpty(auth)) {
                navigation.navigate('ProjectNav');
            }
        }
    }

render() {
    const activity = this.props.activity || {};
    const problemSolutions = this.props.problemSolutions || {};
    const { open, dialogData, showSolutionFor } = this.state;
    const { student, solution } = dialogData || {};
    if (
      isLoaded(this.props.activity) &&
      this.props.uid !== this.props.activity.owner
    ) {
      return (
        <Typography style={{ textAlign: "center", marginTop: 55 }} variant="h5">
          You are not the owner of this activity.
        </Typography>
      );
    }
    const hasLoaded =
      isLoaded(this.props.activity) && isLoaded(this.props.problemSolutions);

    if (!hasLoaded) {
      return (
        <Typography style={{ textAlign: "center", marginTop: 55 }} variant="h5">
          Loading...
        </Typography>

checkAuthStatusAndStage = () => {
    const { userId, storeId, history } = this.props
    const { refreshIntervalId } = this.state

    if (ReactReduxFirebase.isLoaded()) {
      clearInterval(refreshIntervalId)

      this.setState({ loading: false })

      if (userId && storeId) {
        history.push(ROUTE.PATH.STORE)
      }

      if (userId && !storeId) {
        history.push(ROUTE.PATH.SIGN_UP_STORE)
      }
    }
  }

function List() {
  useFirestoreConnect([{
    collection: "todos",
  }]);
  const todos = useSelector((state: SystemState) => state.firebase.data.todos);
  if (!isLoaded(todos)) { return "Loading..."; }
  if (isEmpty(todos)) { return null; }
  return (
    <ul>
      {todos.map((todo: any) => (
        <li key={todo.id}>{todo.name}</li>
      ))}
    </ul>
  );
}

<div className='App-header'>
        <h2>react-redux-firebase demo</h2>
        <img src={logo} className='App-logo' alt='logo' />
      </div>
      <div className='App-todos'>
        <h4>
          Loaded From
          <span className='App-Url'>
            <a href='https://redux-firebasev3.firebaseio.com/'>
              redux-firebasev3.firebaseio.com
            </a>
          </span>
        </h4>
        <h4>Todos List</h4>
        {
          !isLoaded(todos)
            ? 'Loading'
            : isEmpty(todos)
              ? 'Todo list is empty'
              : todos.reverse().map(({ value: todo, key }, ind) => (
                <TodoItem
                  key={`${key}-${ind}`}
                  id={key}
                  {...todo}
                />
              ))
        }
        <NewTodo />
      </div>
    </div>
  )
}

isLoaded = (): boolean => {
    const { auth, items, orders, currentUser, currentStore } = this.props
    return ReactReduxFirebase.isLoaded(
      auth,
      items,
      orders,
      currentUser,
      currentStore
    )
  }
}