From 42f5a488353cfa2f8c06df3c740c4990d91b6a06 Mon Sep 17 00:00:00 2001
From: Sergio Valero <sergio.valero@edunext.co>
Date: Fri, 6 Sep 2024 10:34:37 -0400
Subject: [PATCH] fix: add spinner loader before display unauthorized page

---
 src/features/Main/index.jsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/features/Main/index.jsx b/src/features/Main/index.jsx
index dff82d4..4bad677 100644
--- a/src/features/Main/index.jsx
+++ b/src/features/Main/index.jsx
@@ -9,7 +9,7 @@ import {
 } from 'react-router-dom';
 
 import { getConfig } from '@edx/frontend-platform';
-import { Container } from '@edx/paragon';
+import { Container, Spinner } from '@edx/paragon';
 
 import CookiePolicyBanner from '@pearsonedunext/frontend-component-cookie-policy-banner';
 
@@ -36,7 +36,7 @@ import { updateSelectedInstitution } from 'features/Main/data/slice';
 
 import { useInstitutionIdQueryParam } from 'hooks';
 
-import { cookieText, INSTITUTION_QUERY_ID } from 'features/constants';
+import { cookieText, INSTITUTION_QUERY_ID, RequestStatus } from 'features/constants';
 
 import './index.scss';
 
@@ -49,6 +49,9 @@ const Main = () => {
 
   const searchParams = new URLSearchParams(location.search);
 
+  const statusInstitutions = useSelector((state) => state.main.institution.status);
+  const isLoadingInstitutions = statusInstitutions === RequestStatus.LOADING;
+
   useEffect(() => {
     dispatch(fetchInstitutionData());
   }, [dispatch]);
@@ -82,8 +85,17 @@ const Main = () => {
       <Header />
       <div className="pageWrapper">
         <main className="d-flex">
-          {institutions.length < 1 && <UnauthorizedPage />}
-          {institutions.length > 0 && (
+          {isLoadingInstitutions && (
+            <div className="w-100 h-100 d-flex justify-content-center align-items-center">
+              <Spinner
+                animation="border"
+                className="mie-3"
+                screenReaderText="loading"
+              />
+            </div>
+          )}
+          {!isLoadingInstitutions && institutions.length < 1 && <UnauthorizedPage />}
+          {!isLoadingInstitutions && institutions.length > 0 && (
             <>
               <Sidebar />
               <Container className="px-0 container-pages">