diff --git a/src/library-authoring/component-info/ComponentDetails.test.tsx b/src/library-authoring/component-info/ComponentDetails.test.tsx
index 48c0d9827b..b885cf7ef2 100644
--- a/src/library-authoring/component-info/ComponentDetails.test.tsx
+++ b/src/library-authoring/component-info/ComponentDetails.test.tsx
@@ -7,6 +7,20 @@ import { mockLibraryBlockMetadata } from '../data/api.mocks';
 import ComponentDetails from './ComponentDetails';
 
 describe('<ComponentDetails />', () => {
+  it('should render the component details loading', async () => {
+    initializeMocks();
+    mockLibraryBlockMetadata.applyMock();
+    render(<ComponentDetails usageKey={mockLibraryBlockMetadata.usageKeyThatNeverLoads} />);
+    expect(await screen.findByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('should render the component details error', async () => {
+    initializeMocks();
+    mockLibraryBlockMetadata.applyMock();
+    render(<ComponentDetails usageKey={mockLibraryBlockMetadata.usageKeyError404} />);
+    expect(await screen.findByText(/Mocked request failed with status code 404/)).toBeInTheDocument();
+  });
+
   it('should render the component usage', async () => {
     initializeMocks();
     mockLibraryBlockMetadata.applyMock();
diff --git a/src/library-authoring/component-info/ComponentDetails.tsx b/src/library-authoring/component-info/ComponentDetails.tsx
index a70e2ec0b5..a5481eb22e 100644
--- a/src/library-authoring/component-info/ComponentDetails.tsx
+++ b/src/library-authoring/component-info/ComponentDetails.tsx
@@ -1,6 +1,8 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Stack } from '@openedx/paragon';
 
+import AlertError from '../../generic/alert-error';
+import Loading from '../../generic/Loading';
 import { useLibraryBlockMetadata } from '../data/apiHooks';
 import HistoryWidget from '../generic/history-widget';
 import { ComponentDeveloperInfo } from './ComponentDeveloperInfo';
@@ -12,11 +14,19 @@ interface ComponentDetailsProps {
 
 const ComponentDetails = ({ usageKey }: ComponentDetailsProps) => {
   const intl = useIntl();
-  const { data: componentMetadata } = useLibraryBlockMetadata(usageKey);
+  const {
+    data: componentMetadata,
+    isError,
+    error,
+    isLoading,
+  } = useLibraryBlockMetadata(usageKey);
 
-  // istanbul ignore if: this should never happen
-  if (!componentMetadata) {
-    return null;
+  if (isError) {
+    return <AlertError error={error} />;
+  }
+
+  if (isLoading) {
+    return <Loading />;
   }
 
   return (
diff --git a/src/library-authoring/data/api.mocks.ts b/src/library-authoring/data/api.mocks.ts
index 2dfb3dc7b9..db516a0010 100644
--- a/src/library-authoring/data/api.mocks.ts
+++ b/src/library-authoring/data/api.mocks.ts
@@ -220,11 +220,18 @@ mockXBlockFields.applyMock = () => jest.spyOn(api, 'getXBlockFields').mockImplem
 export async function mockLibraryBlockMetadata(usageKey: string): Promise<api.LibraryBlockMetadata> {
   const thisMock = mockLibraryBlockMetadata;
   switch (usageKey) {
+    case thisMock.usageKeyThatNeverLoads:
+      // Return a promise that never resolves, to simulate never loading:
+      return new Promise<any>(() => {});
+    case thisMock.usageKeyError404:
+      throw createAxiosError({ code: 404, message: 'Not found.', path: api.getLibraryBlockMetadataUrl(usageKey) });
     case thisMock.usageKeyNeverPublished: return thisMock.dataNeverPublished;
     case thisMock.usageKeyPublished: return thisMock.dataPublished;
     default: throw new Error(`No mock has been set up for usageKey "${usageKey}"`);
   }
 }
+mockLibraryBlockMetadata.usageKeyThatNeverLoads = 'lb:Axim:infiniteLoading:html:123';
+mockLibraryBlockMetadata.usageKeyError404 = 'lb:Axim:error404:html:123';
 mockLibraryBlockMetadata.usageKeyNeverPublished = 'lb:Axim:TEST1:html:571fe018-f3ce-45c9-8f53-5dafcb422fd1';
 mockLibraryBlockMetadata.dataNeverPublished = {
   id: 'lb:Axim:TEST1:html:571fe018-f3ce-45c9-8f53-5dafcb422fd1',