refactor: Extract SymmaryCard

Author: ChrisChV

src/library-authoring/course-import/ReviewImportDetails.tsx

@@ -1,10 +1,10 @@
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Card, Icon, Stack } from '@openedx/paragon';
+import { Card, Stack } from '@openedx/paragon';
 import { LoadingSpinner } from '@src/generic/Loading';
-import { getItemIcon } from '@src/generic/block-type-utils';
-import { Widgets } from '@openedx/paragon/icons';
 import { useCourseDetails } from '@src/course-outline/data/apiHooks';
+
 import messages from './messages';
+import { SummaryCard } from './SummaryCard';
 
 export const ReviewImportDetails = ({ courseId }: { courseId?: string }) => {
   const { data, isPending } = useCourseDetails(courseId);
@@ -31,45 +31,7 @@ export const ReviewImportDetails = ({ courseId }: { courseId?: string }) => {
         )}
       </Card>
       <h4><FormattedMessage {...messages.importCourseAnalysisSummary} /></h4>
-      <Card>
-        <Card.Section>
-          <Stack direction="horizontal">
-            <Stack className="align-items-center" gap={2}>
-              <FormattedMessage {...messages.importCourseTotalBlocks} />
-              <LoadingSpinner />
-            </Stack>
-            <div className="border-light-400" style={{ borderLeft: '2px solid', height: '50px' }} />
-            <Stack className="align-items-center" gap={2}>
-              <FormattedMessage {...messages.importCourseSections} />
-              <Stack className="justify-content-center" direction="horizontal" gap={3}>
-                <Icon src={getItemIcon('section')} />
-                <LoadingSpinner />
-              </Stack>
-            </Stack>
-            <Stack className="align-items-center" gap={2}>
-              <FormattedMessage {...messages.importCourseSubsections} />
-              <Stack className="justify-content-center" direction="horizontal" gap={3}>
-                <Icon src={getItemIcon('subsection')} />
-                <LoadingSpinner />
-              </Stack>
-            </Stack>
-            <Stack className="align-items-center" gap={2}>
-              <FormattedMessage {...messages.importCourseUnits} />
-              <Stack className="justify-content-center" direction="horizontal" gap={3}>
-                <Icon src={getItemIcon('unit')} />
-                <LoadingSpinner />
-              </Stack>
-            </Stack>
-            <Stack className="align-items-center" gap={2}>
-              <FormattedMessage {...messages.importCourseComponents} />
-              <Stack className="justify-content-center" direction="horizontal" gap={3}>
-                <Icon src={Widgets} />
-                <LoadingSpinner />
-              </Stack>
-            </Stack>
-          </Stack>
-        </Card.Section>
-      </Card>
+      <SummaryCard />
       <h4><FormattedMessage {...messages.importCourseDetailsTitle} /></h4>
       <Card className="p-6">
         <Stack className="align-items-center" gap={3}>

src/library-authoring/course-import/SummaryCard.tsx

@@ -0,0 +1,51 @@
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Card, Icon, Stack } from '@openedx/paragon';
+import { Widgets } from '@openedx/paragon/icons';
+
+import { LoadingSpinner } from '@src/generic/Loading';
+import { getItemIcon } from '@src/generic/block-type-utils';
+
+import messages from './messages';
+
+// TODO: The SummaryCard is always in loading state
+export const SummaryCard = () => (
+  <Card>
+    <Card.Section>
+      <Stack direction="horizontal">
+        <Stack className="align-items-center" gap={2}>
+          <FormattedMessage {...messages.importCourseTotalBlocks} />
+          <LoadingSpinner />
+        </Stack>
+        <div className="border-light-400" style={{ borderLeft: '2px solid', height: '50px' }} />
+        <Stack className="align-items-center" gap={2}>
+          <FormattedMessage {...messages.importCourseSections} />
+          <Stack className="justify-content-center" direction="horizontal" gap={3}>
+            <Icon src={getItemIcon('section')} />
+            <LoadingSpinner />
+          </Stack>
+        </Stack>
+        <Stack className="align-items-center" gap={2}>
+          <FormattedMessage {...messages.importCourseSubsections} />
+          <Stack className="justify-content-center" direction="horizontal" gap={3}>
+            <Icon src={getItemIcon('subsection')} />
+            <LoadingSpinner />
+          </Stack>
+        </Stack>
+        <Stack className="align-items-center" gap={2}>
+          <FormattedMessage {...messages.importCourseUnits} />
+          <Stack className="justify-content-center" direction="horizontal" gap={3}>
+            <Icon src={getItemIcon('unit')} />
+            <LoadingSpinner />
+          </Stack>
+        </Stack>
+        <Stack className="align-items-center" gap={2}>
+          <FormattedMessage {...messages.importCourseComponents} />
+          <Stack className="justify-content-center" direction="horizontal" gap={3}>
+            <Icon src={Widgets} />
+            <LoadingSpinner />
+          </Stack>
+        </Stack>
+      </Stack>
+    </Card.Section>
+  </Card>
+);