withLoading Example

Example

import { useState } from 'react';

function withLoading(Component) {
  return function WithLoading({ isLoading, ...props }) {
    if (isLoading) return <p>⏳ Loading...</p>;
    return <Component {...props} />;
  };
}

function UserList({ users }) {
  return <ul>{users.map((u) => <li key={u}>{u}</li>)}</ul>;
}

const UserListWithLoading = withLoading(UserList);

export default function App() {
  const [loading, setLoading] = useState(true);
  return (
    <div>
      <button onClick={() => setLoading(!loading)}>Toggle loading</button>
      <UserListWithLoading isLoading={loading} users={['Asha', 'Ravi', 'Meena']} />
    </div>
  );
}

Result