I've really been enjoying learning about how to make applications and websites more accessible and recently wondered about how to appropriately label a loader for a side project React app I'm writing. After scouring Stackoverflow answers, and looking at what Bootstrap's solution is, I came across an article by some company called Dockyard. They all conflict in different ways. Finally, I followed an SO link to Fundamental UI. And came up with this idea:

const Loader = () => <div aria-label="Loading">loading...</div>;

const LoadContent = ({ isLoading, children }) => {
  return (
    <div aria-busy={isLoading} aria-live="polite">
      {isLoading && <Loader />}
      {!isLoading && children}
    </div>
  );
};

Here's what it does (as I understand it):

• aria-busy lets us indicate that the container is in the process of updating.
• aria-live lets us indicate that the element is going to updated. The polite property indicates a background change (this might be a good place to add a prop to indicate if the content is main content, or background content)
• aria-label lets us indicate the label for the element.

I made a Sandbox where you can check this out in action.

I'm still getting started with accessibility so I welcome any input on this.