What's a suspense boundary and what it does when throws a promise?

SuspenseTest.jsx

import { Suspense } from 'react';
import Albums from './Albums.js';

export default function ArtistPage({ artist }) {
  return (
    <>
      <h1>{artist.name}</h1>
      <Suspense fallback={<Loading />}>
        <Albums artistId={artist.id} />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2> Loading...</h2>;
}
import { use } from "react";
import { fetchData } from "./data.js";

export default function Albums({ artistId }) {
  const albums = use(fetchData(`/${artistId}/albums`));

  return (
    <ul>
      {albums.map((album) => (
        <li key={album.id}>
          {album.title} ({album.year})
        </li>
      ))}
    </ul>
  );
}