SomeComponent.tsx

import { useState, useEffect, useCallback } from "react";
import { withWebPerformance } from "./withWebPerformance";
import Loader from "./components/Loader";

export default function SomeComponent() {
  const LoaderWithPerformance = withWebPerformance(Loader, "web-perf");
  const [loading, setLoading] = useState(true);
  
  // ...
  // TODO: load something and update the loading state
  // 

  // callback when loader is complete
  const onLoaded = useCallback((measure: PerformanceMeasure) => {
    setLoadingTime(measure.duration);
  }, []);

  return (
    <div className="App">
      {loading ? (
        <LoaderWithPerformance onLoaded={onLoaded} />
      ) : (
        <div>
          { /* ... */ }
        </div>
      )}
    </div>
  );
}