From b63508db97662c76658e19398c0cf5a07f8cb800 Mon Sep 17 00:00:00 2001
From: Jorg Are <jorg2all@yahoo.com>
Date: Wed, 11 Sep 2024 14:11:08 +0100
Subject: [PATCH] feat: Add a plugin slot for the content iframe loader (#1453)

---
 .../course/sequence/Unit/ContentIFrame.jsx       | 16 +++++++++++++++-
 .../Unit/__snapshots__/index.test.jsx.snap       |  1 +
 src/courseware/course/sequence/Unit/index.jsx    |  1 +
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/courseware/course/sequence/Unit/ContentIFrame.jsx b/src/courseware/course/sequence/Unit/ContentIFrame.jsx
index 6d21c129..54c4d662 100644
--- a/src/courseware/course/sequence/Unit/ContentIFrame.jsx
+++ b/src/courseware/course/sequence/Unit/ContentIFrame.jsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { ErrorPage } from '@edx/frontend-platform/react';
 import { StrictDict } from '@edx/react-unit-test-utils';
 import { ModalDialog, Modal } from '@openedx/paragon';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 
 import PageLoading from '@src/generic/PageLoading';
 import * as hooks from './hooks';
@@ -35,6 +36,7 @@ const ContentIFrame = ({
   elementId,
   onLoaded,
   title,
+  courseId,
 }) => {
   const {
     handleIFrameLoad,
@@ -82,7 +84,17 @@ const ContentIFrame = ({
   return (
     <>
       {(shouldShowContent && !hasLoaded) && (
-        showError ? <ErrorPage /> : <PageLoading srMessage={loadingMessage} />
+        showError ? <ErrorPage /> : (
+          <PluginSlot
+            id="content_iframe_loader_slot"
+            pluginProps={{
+              defaultLoaderComponent: <PageLoading srMessage={loadingMessage} />,
+              courseId,
+            }}
+          >
+            <PageLoading srMessage={loadingMessage} />
+          </PluginSlot>
+        )
       )}
       {shouldShowContent && (
         <div className="unit-iframe-wrapper">
@@ -124,11 +136,13 @@ ContentIFrame.propTypes = {
   elementId: PropTypes.string.isRequired,
   onLoaded: PropTypes.func,
   title: PropTypes.node.isRequired,
+  courseId: PropTypes.string,
 };
 
 ContentIFrame.defaultProps = {
   iframeUrl: null,
   onLoaded: () => ({}),
+  courseId: '',
 };
 
 export default ContentIFrame;
diff --git a/src/courseware/course/sequence/Unit/__snapshots__/index.test.jsx.snap b/src/courseware/course/sequence/Unit/__snapshots__/index.test.jsx.snap
index 63b0fb5a..c82b9fa4 100644
--- a/src/courseware/course/sequence/Unit/__snapshots__/index.test.jsx.snap
+++ b/src/courseware/course/sequence/Unit/__snapshots__/index.test.jsx.snap
@@ -49,6 +49,7 @@ exports[`Unit component output snapshot: not bookmarked, do not show content 1`]
     id="test-props-id"
   />
   <ContentIFrame
+    courseId="test-course-id"
     elementId="unit-iframe"
     id="test-props-id"
     loadingMessage="Loading learning sequence..."
diff --git a/src/courseware/course/sequence/Unit/index.jsx b/src/courseware/course/sequence/Unit/index.jsx
index b4653752..d6c6dc6f 100644
--- a/src/courseware/course/sequence/Unit/index.jsx
+++ b/src/courseware/course/sequence/Unit/index.jsx
@@ -60,6 +60,7 @@ const Unit = ({
         onLoaded={onLoaded}
         shouldShowContent={!shouldDisplayHonorCode && !examAccess.blockAccess}
         title={unit.title}
+        courseId={courseId}
       />
     </div>
   );