feat: create a loading page and the AuthZModule

src/authz-module/constants.ts

@@ -0,0 +1,25 @@
+export interface TeamMember {
+  displayName: string;
+  username: string;
+  email: string;
+  roles: string[];
+}
+
+export interface LibraryMetadata {
+  id: string;
+  org: string;
+  title: string;
+  slug: string;
+}
+
+export interface TableCellValue<T> {
+  row: {
+    original: T;
+  };
+}
+
+
+export const ROUTES = {
+  LIBRARIES_TEAM_PATH: '/libraries/:libraryId',
+  LIBRARIES_USER_PATH: '/libraries/user/:username'
+}; 

src/authz-module/index.test.tsx

@@ -0,0 +1,43 @@
+import { ComponentType, lazy } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import AuthZModule from './index';
+
+jest.mock('./libraries-manager/LibrariesAuthZManager', () => {
+  return lazy(() =>
+    new Promise<{ default: ComponentType<any> }>(resolve =>
+      setTimeout(() => resolve({ default: () => <div data-testid="libraries-manager">Loaded</div> }), 100)
+    )
+  );
+});
+
+const createTestQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+describe('AuthZModule', () => {
+  it('renders LoadingPage then LibrariesAuthZManager when route matches', async () => {
+    const queryClient = createTestQueryClient();
+    const path = '/libraries/lib:123';
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={[path]}>
+          <AuthZModule />
+        </MemoryRouter>
+      </QueryClientProvider>
+    );
+
+    expect(screen.getByTestId('loading-page')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('libraries-manager')).toBeInTheDocument();
+    });
+  });
+});

src/authz-module/index.tsx

@@ -1,5 +1,20 @@
+import { Suspense } from 'react';
+import { Routes, Route } from 'react-router-dom';
+import { ErrorBoundary } from '@edx/frontend-platform/react';
+import LoadingPage from '@src/components/LoadingPage';
+import LibrariesAuthZManager from './libraries-manager/LibrariesAuthZManager';
+import { ROUTES } from './constants';
+
+import './index.scss';
+
 const AuthZModule = () => (
-    <div>AuthZ Module</div>
+  <ErrorBoundary>
+    <Suspense fallback={<LoadingPage />}>
+      <Routes>
+        <Route path={ROUTES.LIBRARIES_TEAM_PATH} element={<LibrariesAuthZManager />} />
+      </Routes>
+    </Suspense>
+  </ErrorBoundary>
 );
 
 export default AuthZModule;

src/components/LoadingPage.tsx

@@ -0,0 +1,16 @@
+import { Spinner, Container } from '@openedx/paragon';
+
+const LoadingPage= () => {
+  return (
+    <Container className="d-flex vh-100" data-testid="loading-page">
+          <Spinner
+            variant="primary"
+            animation="border"
+            role="status"
+            className="mb-3 m-auto"
+          />
+    </Container>
+  );
+};
+
+export default LoadingPage;