fix: add spinner while loading the optional fields in embadded exp (#…

…1102) Description: Add spinner while loading the optional fields in embadded exp VAN-1658
openedx · Nov 14, 2023 · f0b855d · f0b855d
1 parent 4466497
commit f0b855d
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 51 deletions.
diff --git a/src/progressive-profiling/ProgressiveProfiling.jsx b/src/progressive-profiling/ProgressiveProfiling.jsx
@@ -14,6 +14,7 @@ import {
   Alert,
   Form,
   Hyperlink,
+  Spinner,
   StatefulButton,
 } from '@edx/paragon';
 import { Error } from '@edx/paragon/icons';
@@ -217,57 +218,63 @@ const ProgressiveProfiling = (props) => {
         />
       )}
       <div className="mw-xs m-4 pp-page-content">
-        <div>
-          <h2 className="pp-page__heading text-primary">{formatMessage(messages['progressive.profiling.page.heading'])}</h2>
-        </div>
-        <hr className="border-light-700 mb-4" />
-        {showError ? (
-          <Alert id="pp-page-errors" className="mb-3" variant="danger" icon={Error}>
-            <Alert.Heading>{formatMessage(messages['welcome.page.error.heading'])}</Alert.Heading>
-            <p>{formatMessage(messages['welcome.page.error.message'])}</p>
-          </Alert>
-        ) : null}
-        <Form>
-          {formFields}
-          {(getConfig().AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK) && (
-            <span className="pp-page__support-link">
-              <Hyperlink
-                isInline
-                variant="muted"
-                destination={getConfig().AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK}
-                target="_blank"
-                showLaunchIcon={false}
-                onClick={() => (sendTrackEvent('edx.bi.welcome.page.support.link.clicked'))}
-              >
-                {formatMessage(messages['optional.fields.information.link'])}
-              </Hyperlink>
-            </span>
-          )}
-          <div className="d-flex mt-4 mb-3">
-            <StatefulButton
-              type="submit"
-              variant="brand"
-              className="pp-page__button-width"
-              state={submitState}
-              labels={{
-                default: showRecommendationsPage ? formatMessage(messages['optional.fields.next.button']) : formatMessage(messages['optional.fields.submit.button']),
-                pending: '',
-              }}
-              onClick={handleSubmit}
-              onMouseDown={(e) => e.preventDefault()}
-            />
-            <StatefulButton
-              className="text-gray-700 font-weight-500"
-              type="submit"
-              variant="link"
-              labels={{
-                default: formatMessage(messages['optional.fields.skip.button']),
-              }}
-              onClick={handleSkip}
-              onMouseDown={(e) => e.preventDefault()}
-            />
-          </div>
-        </Form>
+        {registrationEmbedded && welcomePageContextApiStatus === PENDING_STATE ? (
+          <Spinner animation="border" variant="primary" id="tpa-spinner" />
+        ) : (
+          <>
+            <div>
+              <h2 className="pp-page__heading text-primary">{formatMessage(messages['progressive.profiling.page.heading'])}</h2>
+            </div><hr className="border-light-700 mb-4" />
+            {showError ? (
+              <Alert id="pp-page-errors" className="mb-3" variant="danger" icon={Error}>
+                <Alert.Heading>{formatMessage(messages['welcome.page.error.heading'])}</Alert.Heading>
+                <p>{formatMessage(messages['welcome.page.error.message'])}</p>
+              </Alert>
+            ) : null}
+            <Form>
+              {formFields}
+              {(getConfig().AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK) && (
+                <span className="pp-page__support-link">
+                  <Hyperlink
+                    isInline
+                    variant="muted"
+                    destination={getConfig().AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK}
+                    target="_blank"
+                    showLaunchIcon={false}
+                    onClick={() => (sendTrackEvent('edx.bi.welcome.page.support.link.clicked'))}
+                  >
+                    {formatMessage(messages['optional.fields.information.link'])}
+                  </Hyperlink>
+                </span>
+              )}
+              <div className="d-flex mt-4 mb-3">
+                <StatefulButton
+                  type="submit"
+                  variant="brand"
+                  className="pp-page__button-width"
+                  state={submitState}
+                  labels={{
+                    default: showRecommendationsPage ? formatMessage(messages['optional.fields.next.button']) : formatMessage(messages['optional.fields.submit.button']),
+                    pending: '',
+                  }}
+                  onClick={handleSubmit}
+                  onMouseDown={(e) => e.preventDefault()}
+                />
+                <StatefulButton
+                  className="text-gray-700 font-weight-500"
+                  type="submit"
+                  variant="link"
+                  labels={{
+                    default: formatMessage(messages['optional.fields.skip.button']),
+                  }}
+                  onClick={handleSkip}
+                  onMouseDown={(e) => e.preventDefault()}
+                />
+              </div>
+            </Form>
+          </>
+        )}
+
       </div>
     </BaseContainer>
   );

diff --git a/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx b/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx
@@ -14,6 +14,7 @@ import {
   COMPLETE_STATE, DEFAULT_REDIRECT_URL,
   EMBEDDED,
   FAILURE_STATE,
+  PENDING_STATE,
   RECOMMENDATIONS,
 } from '../../data/constants';
 import { saveUserProfile } from '../data/actions';
@@ -292,6 +293,28 @@ describe('ProgressiveProfilingTests', () => {
       expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.skip.link.clicked', { host });
     });
 
+    it('should show spinner while fetching the optional fields', () => {
+      delete window.location;
+      window.location = {
+        assign: jest.fn().mockImplementation((value) => { window.location.href = value; }),
+        href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING),
+        search: `?host=${host}&variant=${EMBEDDED}`,
+      };
+
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          thirdPartyAuthApiStatus: PENDING_STATE,
+          optionalFields,
+        },
+      });
+
+      const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
+
+      expect(progressiveProfilingPage.find('#tpa-spinner').exists()).toBeTruthy();
+    });
+
     it('should set host property value to host where iframe is embedded for on ramp experience', () => {
       const expectedEventProperties = {
         isGenderSelected: false,