♻️(frontend) replace the loaders with Cunningham Loader

CHANGELOG.md

@@ -19,6 +19,7 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 ### Changed
 
 - Replace grommet Heading (#2410)
+- Replace all the loaders by Cunningham Loader (#2436)
 - Upgrade to python 3.11
 - Upgrade channels and channels-redis to version 4
 

src/frontend/apps/lti_site/apps/classroom/components/Routes.tsx

@@ -1,10 +1,10 @@
 import { DASHBOARD_CLASSROOM_ROUTE } from 'lib-classroom';
 import { lazyImport } from 'lib-common';
 import {
+  BoxLoader,
   ErrorComponents,
   FULL_SCREEN_ERROR_ROUTE,
   FullScreenError,
-  Loader,
   WithParams,
   builderFullScreenErrorRoute,
   useAppConfig,
@@ -37,7 +37,7 @@ const Routes = () => {
 
   return (
     <Wrappers>
-      <Suspense fallback={<Loader />}>
+      <Suspense fallback={<BoxLoader />}>
         <RoutesDom>
           <Route
             path={DASHBOARD_CLASSROOM_ROUTE}

src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardInstructor/index.tsx

@@ -1,7 +1,7 @@
 import { Select } from '@openfun/cunningham-react';
 import { Box, Pagination, Paragraph, Text } from 'grommet';
 import { Maybe } from 'lib-common';
-import { FileDepository, Heading, Loader } from 'lib-components';
+import { BoxLoader, FileDepository, Heading } from 'lib-components';
 import React, { FocusEvent, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
@@ -180,7 +180,7 @@ export const DashboardInstructor = ({
           <FormattedMessage {...messages.filesListHeader} />
         </Heading>
         {isLoading ? (
-          <Loader />
+          <BoxLoader />
         ) : isError ? (
           <FormattedMessage {...messages.fetchFilesError} />
         ) : (

src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/index.tsx

@@ -1,5 +1,10 @@
 import { Box, Grid, Paragraph } from 'grommet';
-import { FileDepository, Heading, Loader, useResponsive } from 'lib-components';
+import {
+  BoxLoader,
+  FileDepository,
+  Heading,
+  useResponsive,
+} from 'lib-components';
 import React from 'react';
 import { FormattedMessage, defineMessages } from 'react-intl';
 
@@ -63,7 +68,7 @@ export const DashboardStudent = ({ fileDepository }: DashboardStudentProps) => {
           <FormattedMessage {...messages.filesListHeader} />
         </Heading>
         {isLoading ? (
-          <Loader />
+          <BoxLoader />
         ) : isError ? (
           <FormattedMessage {...messages.fetchFilesError} />
         ) : (

src/frontend/apps/lti_site/apps/deposit/components/Dashboard/index.spec.tsx

@@ -81,7 +81,7 @@ describe('<DashboardFileDepository />', () => {
     fetchMock.get('/api/filedepositories/1/', fileDepositoryDeferred.promise);
 
     render(<DashboardFileDepository />);
-    screen.getByText('Loading file depository...');
+    screen.getByLabelText('Loading file depository...');
     fileDepositoryDeferred.resolve(fileDepository);
     await screen.findByText('File depository loaded.');
     expect(screen.getByText('Student view')).toBeInTheDocument();
@@ -98,7 +98,7 @@ describe('<DashboardFileDepository />', () => {
     fetchMock.get('/api/filedepositories/1/', fileDepositoryDeferred.promise);
 
     render(<DashboardFileDepository />);
-    screen.getByText('Loading file depository...');
+    screen.getByLabelText('Loading file depository...');
     fileDepositoryDeferred.resolve(fileDepository);
     await screen.findByText('File depository loaded.');
     expect(screen.getByText('Instructor view')).toBeInTheDocument();
@@ -123,7 +123,7 @@ describe('<DashboardFileDepository />', () => {
     render(<DashboardFileDepository />, {
       queryOptions: { client: queryClient },
     });
-    screen.getByText('Loading file depository...');
+    screen.getByLabelText('Loading file depository...');
     fileDepositoryDeferred.resolve(500);
     expect(
       await screen.findByText('File depository not loaded!'),

src/frontend/apps/lti_site/apps/deposit/components/Dashboard/index.tsx

@@ -1,9 +1,10 @@
-import { Box, Spinner, ThemeContext, ThemeType } from 'grommet';
+import { Loader } from '@openfun/cunningham-react';
+import { Box, ThemeContext, ThemeType } from 'grommet';
 import { normalizeColor } from 'grommet/utils';
 import { theme } from 'lib-common';
 import { UploadManager, useCurrentResourceContext } from 'lib-components';
 import React, { Fragment } from 'react';
-import { FormattedMessage, defineMessages } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { depositAppData } from 'apps/deposit/data/depositAppData';
 import { useFileDepository } from 'apps/deposit/data/queries';
@@ -66,6 +67,7 @@ const extendedTheme: ThemeType = {
 };
 
 const Dashboard = () => {
+  const intl = useIntl();
   const [context] = useCurrentResourceContext();
   const canUpdate = context.permissions.can_update;
 
@@ -94,9 +96,7 @@ const Dashboard = () => {
     useFileDepositoryStatus === 'loading'
   ) {
     content = (
-      <Spinner size="large">
-        <FormattedMessage {...messages.loadingFileDepository} />
-      </Spinner>
+      <Loader aria-label={intl.formatMessage(messages.loadingFileDepository)} />
     );
   }
 

src/frontend/apps/lti_site/apps/deposit/components/Routes.tsx

@@ -1,8 +1,8 @@
 import {
+  BoxLoader,
   ErrorComponents,
   FULL_SCREEN_ERROR_ROUTE,
   FullScreenError,
-  Loader,
   WithParams,
   builderFullScreenErrorRoute,
   useAppConfig,
@@ -23,7 +23,7 @@ const RoutesDeposit = () => {
   const appData = useAppConfig();
 
   return (
-    <Suspense fallback={<Loader />}>
+    <Suspense fallback={<BoxLoader />}>
       <MemoryRouter>
         <Routes>
           <Route path={DASHBOARD_ROUTE} element={<Dashboard />} />

src/frontend/apps/lti_site/apps/markdown/components/Routes.tsx

@@ -1,9 +1,9 @@
 import { lazyImport } from 'lib-common';
 import {
+  BoxLoader,
   ErrorComponents,
   FULL_SCREEN_ERROR_ROUTE,
   FullScreenError,
-  Loader,
   UploadManager,
   WithParams,
   builderFullScreenErrorRoute,
@@ -35,7 +35,7 @@ const RoutesMarkdown = () => {
   const markdownDocument = MarkdownAppData.markdownDocument;
 
   return (
-    <Suspense fallback={<Loader />}>
+    <Suspense fallback={<BoxLoader />}>
       <MemoryRouter>
         <UploadManager>
           <Routes>

src/frontend/apps/lti_site/components/App/AppContentLoader/index.tsx

@@ -5,9 +5,9 @@ import { Grommet } from 'grommet';
 import { colors, theme } from 'lib-common';
 import {
   BoundaryScreenError,
+  BoxLoader,
   CurrentResourceContextProvider,
   DecodedJwtLTI,
-  Loader,
   ResourceContext,
   User,
   appNames,
@@ -210,7 +210,7 @@ const AppContentLoader = () => {
                     },
                   }}
                 />
-                <Suspense fallback={<Loader />}>
+                <Suspense fallback={<BoxLoader />}>
                   <AppContent />
                 </Suspense>
                 <GlobalStyles />

src/frontend/apps/lti_site/components/App/index.tsx

@@ -1,4 +1,4 @@
-import { AppConfigProvider, Loader } from 'lib-components';
+import { AppConfigProvider, BoxLoader } from 'lib-components';
 import React, { Suspense, lazy } from 'react';
 
 import { parseDataElements } from 'utils/parseDataElements/parseDataElements';
@@ -14,7 +14,7 @@ export const App = () => {
   return (
     <AppConfigProvider value={appConfig}>
       <AppInitializer jwt={jwt} refresh_token={refresh_token}>
-        <Suspense fallback={<Loader />}>
+        <Suspense fallback={<BoxLoader />}>
           <AppContentLoader />
         </Suspense>
       </AppInitializer>

src/frontend/apps/lti_site/components/Dashboard/index.spec.tsx

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import {
+  BoxLoader,
   Document,
-  Loader,
   Video,
   decodeJwt,
   liveState,
@@ -61,7 +61,7 @@ describe('<Dashboard />', () => {
     } as any);
 
     render(
-      <Suspense fallback={<Loader />}>
+      <Suspense fallback={<BoxLoader />}>
         <Dashboard />
       </Suspense>,
     );
@@ -78,7 +78,7 @@ describe('<Dashboard />', () => {
     } as any);
 
     render(
-      <Suspense fallback={<Loader />}>
+      <Suspense fallback={<BoxLoader />}>
         <Dashboard />
       </Suspense>,
     );

src/frontend/apps/lti_site/components/LTIRoutes/index.tsx

@@ -1,9 +1,9 @@
 import {
+  BoxLoader,
   DASHBOARD_ROUTE,
   ErrorComponents,
   FULL_SCREEN_ERROR_ROUTE,
   FullScreenError,
-  Loader,
   UPLOAD_FORM_ROUTE,
   UploadForm,
   UploadHandlers,
@@ -58,7 +58,7 @@ export const LTIInnerRoutes = () => {
     <UploadManager>
       <UploadHandlers />
       <div className={`marsha-${appData.frontend}`}>
-        <Suspense fallback={<Loader />}>
+        <Suspense fallback={<BoxLoader />}>
           <Routes>
             <Route path={DASHBOARD_ROUTE.default} element={<Dashboard />} />
 

src/frontend/apps/lti_site/components/PlaylistPage/index.spec.tsx

@@ -1,5 +1,5 @@
 import { screen } from '@testing-library/react';
-import { Loader, modelName, useAppConfig } from 'lib-components';
+import { BoxLoader, modelName, useAppConfig } from 'lib-components';
 import { render } from 'lib-tests';
 import React, { Suspense } from 'react';
 
@@ -40,12 +40,12 @@ describe('<PlaylistPage />', () => {
     } as any);
 
     render(
-      <Suspense fallback={<Loader />}>
+      <Suspense fallback={<BoxLoader />}>
         <PlaylistPage />
       </Suspense>,
     );
 
-    expect(screen.getByText('Loading playlist...')).toBeInTheDocument();
+    expect(screen.getByLabelText('Loading playlist...')).toBeInTheDocument();
     await screen.findByText('Dashboard');
   });
 
@@ -62,12 +62,12 @@ describe('<PlaylistPage />', () => {
     } as any);
 
     render(
-      <Suspense fallback={<Loader />}>
+      <Suspense fallback={<BoxLoader />}>
         <PlaylistPage />
       </Suspense>,
     );
 
-    expect(screen.getByText('Loading playlist...')).toBeInTheDocument();
+    expect(screen.getByLabelText('Loading playlist...')).toBeInTheDocument();
     await screen.findByText('Dashboard');
   });
 });

src/frontend/apps/lti_site/components/PlaylistPortability/index.spec.tsx

@@ -55,7 +55,7 @@ describe('<PlaylistPortability />', () => {
 
     render(<PlaylistPortability object={video} />);
 
-    screen.getByText('Loading playlist...');
+    screen.getByLabelText('Loading playlist...');
 
     expect(fetchMock.lastCall()![0]).toEqual(
       `/api/playlists/${currentPlaylist.id}/`,

src/frontend/apps/lti_site/components/PlaylistPortability/index.tsx

@@ -1,5 +1,5 @@
-import { Input } from '@openfun/cunningham-react';
-import { Box, Button, Spinner, Text } from 'grommet';
+import { Input, Loader } from '@openfun/cunningham-react';
+import { Box, Button, Text } from 'grommet';
 import { AddCircle, Trash } from 'grommet-icons';
 import {
   CopyClipboard,
@@ -264,9 +264,7 @@ export const PlaylistPortability = ({ object }: PlaylistPortabilityProps) => {
     usePlaylistStatus === 'loading'
   ) {
     content = (
-      <Spinner size="large">
-        <FormattedMessage {...messages.loadingPlaylist} />
-      </Spinner>
+      <Loader aria-label={intl.formatMessage(messages.loadingPlaylist)} />
     );
   }
 

src/frontend/apps/lti_site/components/SelectContent/SelectContentTabs/index.tsx

@@ -3,10 +3,10 @@ import { deepMerge } from 'grommet/utils';
 import { Document as DocumentIcon } from 'grommet-icons';
 import { theme as baseTheme } from 'lib-common';
 import {
+  BoxLoader,
   Document,
   Live,
   LiveModeType,
-  Loader,
   PlaySVG,
   Playlist,
   Video,
@@ -243,7 +243,7 @@ export const SelectContentTabs = ({
           </Tab>
         )}
         {appTabs.map((LazyComponent, index) => (
-          <Suspense key={index} fallback={<Loader />}>
+          <Suspense key={index} fallback={<BoxLoader />}>
             {playlist && (
               <LazyComponent
                 lti_select_form_data={lti_select_form_data}

src/frontend/apps/lti_site/components/SelectContent/SelectContentTargetedResource/index.tsx

@@ -1,10 +1,10 @@
 import { Box } from 'grommet';
 import {
+  BoxLoader,
   Document,
   Heading,
   Live,
   LiveModeType,
-  Loader,
   LtiSelectResource,
   Playlist,
   Video,
@@ -217,7 +217,7 @@ export const SelectContentTargetedResource = ({
           ) as Promise<{ default: ComponentType<SelectContentResourceProps> }>,
       );
       content = (
-        <Suspense fallback={<Loader />}>
+        <Suspense fallback={<BoxLoader />}>
           <LazyComponent
             playlist={playlist}
             lti_select_form_data={lti_select_form_data}