Source code for https://www.youtube.com/watch?v=5RzOiibu8sg

App.js

import React, { Component, Placeholder } from 'react';
import { unstable_deferredUpdates } from 'react-dom';
import logo from './logo.svg';
import {createCache, createResource} from 'simple-cache-provider';
import { track } from "interaction-tracking";

const fetchUserList = () =>
  fetch('https://jsonplaceholder.typicode.com/users')
    .then(data => data.json());

const fetchUserListWithDelay = () =>
  new Promise(resolve => {
    setTimeout(() => {
      fetchUserList().then(resolve);
    }, 2000);
  });

const cache = createCache();
const UserListResource = createResource(
  fetchUserListWithDelay
);

class App extends Component {
  state = {
    disableButton: false,
    showUserList: false,
  };
  render() {
    return (
      <Placeholder delayMs={1000} fallback={<Fallback/>}>
        <button disabled={this.state.disableButton} onClick={this.handleButtonClick}>Initialize</button>
        {this.state.showUserList && <UserList />}
      </Placeholder>
    );
  }
  handleButtonClick = () => {
    track('loading movies', () => {
      this.setState({disableButton: true});

      unstable_deferredUpdates(() => this.setState({showUserList: true}));
    });
  };
}

function Fallback() {
  return 'Loading...';
}

function UserList() {
  const users = UserListResource.read(cache);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name}
        </li>
      ))}
    </ul>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.unstable_createRoot(document.getElementById('root')).render(<App />);
registerServiceWorker();