refactor: add loading state to the roles cards

Author: dcoa

src/authz-module/libraries-manager/LibrariesTeamManager.tsx

@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Container, Tab, Tabs } from '@openedx/paragon';
+import {
+  Container, Skeleton, Tab, Tabs,
+} from '@openedx/paragon';
 import { useLibrary } from '@src/authz-module/data/hooks';
 import TeamTable from './components/TeamTable';
 import AuthZLayout from '../components/AuthZLayout';
@@ -45,6 +47,7 @@ const LibrariesTeamManager = () => {
           </Tab>
           <Tab eventKey="roles" title={intl.formatMessage(messages['library.authz.tabs.roles'])}>
             <Container className="p-5">
+              {!libraryRoles ? <Skeleton count={2} height={200} /> : null}
               {libraryRoles && libraryRoles.map(role => (
                 <RoleCard
                   key={`${role}-description`}