IssueId #221316 feat Add Lazy Routing in ALL [React]

public/index.html

@@ -20,7 +20,6 @@
       href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap"
       rel="stylesheet"
     />
-    <link href="https://fonts.cdnfonts.com/css/bad-comic" rel="stylesheet" />
     <script src="./js/jquery-3.7.0.min.js" defer></script>
     <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js"></script>
     <title>EkStep</title>

public/service-worker.js

@@ -0,0 +1,70 @@
+// Define the name for the cache
+const CACHE_NAME = 'my-cache-v1';
+
+// Event listener for installation of the service worker
+self.addEventListener('install', event => {
+  // Perform installation steps
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(cache => {
+        console.log('Opened cache');
+        // No need to pre-cache any resources during installation
+      })
+  );
+});
+
+// Event listener for fetching assets
+self.addEventListener('fetch', event => {
+  event.respondWith(
+    caches.open(CACHE_NAME).then(cache => {
+      return cache.match(event.request).then(response => {
+        if (response) {
+          // Resource is in cache, return it
+          // console.log('Resource is cached:', event.request.url);
+          return response;
+        }
+
+        // Resource is not in cache, fetch it from network and cache it
+        return fetch(event.request).then(networkResponse => {
+          // Check if fetched response is valid
+          if (!networkResponse || networkResponse.status !== 200 || networkResponse.type !== 'basic') {
+            return networkResponse;
+          }
+
+          // Clone the response because it's a stream that can only be consumed once
+          const responseToCache = networkResponse.clone();
+
+          // Cache the fetched response
+          caches.open(CACHE_NAME).then(cache => {
+            cache.put(event.request, responseToCache);
+          });
+
+          // console.log('Resource is fetched from network and cached:', event.request.url);
+          return networkResponse;
+        }).catch(error => {
+          // Fetch failed, return a fallback response
+          console.error('Fetch failed:', error);
+          // You can return a custom offline page or a fallback response here
+        });
+      });
+    })
+  );
+});
+
+// Event listener for activation of the service worker
+self.addEventListener('activate', event => {
+  const cacheWhitelist = [CACHE_NAME];
+
+  event.waitUntil(
+    caches.keys().then(cacheNames => {
+      return Promise.all(
+        cacheNames.map(cacheName => {
+          if (cacheWhitelist.indexOf(cacheName) === -1) {
+            // Delete caches not in cacheWhitelist
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});

src/App.js

@@ -11,7 +11,20 @@ import { startEvent } from './services/callTelemetryIntract';
 import '@project-sunbird/telemetry-sdk/index.js';
 
 const App = () => {
-    const ranonce = useRef(false); 
+    const ranonce = useRef(false);
+
+    useEffect(() => {
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', () => {
+                navigator.serviceWorker.register('/service-worker.js').then((registration) => {
+                    console.log('Service Worker registered:', registration);
+                }).catch((error) => {
+                    console.log('Service Worker registration failed:', error);
+                });
+            });
+        }
+    }, []);
+
     useEffect(() => {
         const initService = async () => {
             var did;
@@ -69,7 +82,7 @@ const App = () => {
         };
 
         setFp();
-     }, []);
+    }, []);
 
     return (
         <StyledEngineProvider injectFirst>

src/components/Assesment/Assesment.jsx

@@ -247,9 +247,9 @@ export const MessageDialog = ({
       >
         <Box sx={{ position: "absolute", left: 10, bottom: 0 }}>
           {isError ? (
-            <img src={cryPanda} alt="cryPanda" />
+            <img src={cryPanda} alt="cryPanda" loading="lazy" />
           ) : (
-            <img src={panda} alt="panda" />
+            <img src={panda} alt="panda" loading="lazy" />
           )}
         </Box>
 
@@ -381,7 +381,7 @@ export const ProfileHeader = ({
           {handleBack && (
             <Box ml={{ xs: "10px", sm: "94px" }}>
               <IconButton onClick={handleBack}>
-                <img src={back} alt="back" style={{ height: "30px" }} />
+                <img src={back} alt="back" style={{ height: "30px" }} loading="lazy" />
               </IconButton>
             </Box>
           )}
@@ -392,7 +392,7 @@ export const ProfileHeader = ({
                 sx={{ cursor: "pointer" }}
                 onClick={handleProfileBack}
               >
-                <img src={profilePic} alt="profile-pic" style={{ height: "30px" }} />
+                <img src={profilePic} alt="profile-pic" style={{ height: "30px", width:'30px' }} loading="lazy" />
               </Box>
               <Box ml="12px">
                 <span
@@ -553,6 +553,7 @@ const Assesment = ({ discoverStart }) => {
             getMilestoneDetails?.data.data?.milestone_level?.replace("m", "")
           )
         );
+
         let sessionId = getLocalData("sessionId");
 
         if (!sessionId || sessionId === 'null'){

src/components/DiscoverEnd/DiscoverEnd.jsx

@@ -77,21 +77,23 @@ const SpeakSentenceComponent = () => {
       }}
     >
       <IconButton>
-        <img src={back} alt="back" style={{ height: "30px" }} />
+        <img src={back} alt="back" style={{ height: "30px" }} loading="lazy"  />
       </IconButton>
       <Card sx={sectionStyle}>
         <Box sx={{ position: "absolute", left: "3px", bottom: "0px" }}>
           <img
             src={discoverEndLeft}
             alt="timer"
             className={shake && "shakeImage"}
+            loading="lazy" 
           />
         </Box>
         <Box sx={{ position: "absolute", right: "3px", bottom: "0px" }}>
           <img
             src={discoverEndRight}
             alt="timer"
             className={shake && "shakeImage"}
+            loading="lazy" 
           />
         </Box>
         <Box>

src/components/DiscoverSentance/DiscoverSentance.jsx

@@ -92,7 +92,7 @@ const SpeakSentenceComponent = () => {
       setVoiceText("");
       setEnableNext(false);
     }
-    if (voiceText == "success") {
+    if (voiceText === "success") {
       // go_to_result(voiceText);
       setVoiceText("");
     }

src/components/Layouts.jsx/MainLayout.jsx

@@ -205,6 +205,7 @@ const MainLayout = (props) => {
           <img
             src={levelsImages?.[LEVEL]?.backgroundAddOn}
             alt="backgroundAddOn"
+            loading="lazy" 
           />
         </Box>
       )}
@@ -256,6 +257,7 @@ const MainLayout = (props) => {
               src={catLoading}
               alt="catLoading"
             // sx={{ height: "58px", width: "58px" }}
+            loading="lazy" 
             />
           </Box>
         </Card>
@@ -294,6 +296,7 @@ const MainLayout = (props) => {
                       src={timer}
                       alt="timer"
                       sx={{ height: "58px", width: "58px" }}
+                      loading="lazy" 
                     />
                   </Box>
                 )}
@@ -312,6 +315,7 @@ const MainLayout = (props) => {
                     const showGreen = step + 1 <= currentStep;
                     return (
                       <Box
+                       key={index}
                         index={index}
                         sx={{
                           height: "8px",
@@ -684,6 +688,7 @@ const MainLayout = (props) => {
                           src={clouds}
                           alt="clouds"
                           style={{ zIndex: 222 }}
+                          loading="lazy" 
                         />
                       )}
                     </Box>
@@ -699,6 +704,7 @@ const MainLayout = (props) => {
                           src={gameWon}
                           alt="gameWon"
                           style={{ zIndex: 9999, height: 340 }}
+                          loading="lazy" 
                         />
                       ) : (
                         <Stack justifyContent="center"
@@ -707,6 +713,7 @@ const MainLayout = (props) => {
                             src={gameLost}
                             alt="gameLost"
                             style={{ height: 340 }}
+                            loading="lazy" 
                           />
                        <Typography
                             sx={{ mb: 1, mt: 1, textAlign: "center" }}

src/components/Mechanism/WordsOrImage.jsx

@@ -110,6 +110,8 @@ const WordsOrImage = ({
                 maxHeight: "130px",
                 marginBottom: "40px",
               }}
+              loading="lazy"
+              alt="img"
             />
           </Box>
         ) : type === "phonics" ? (

src/components/Practice/Mechanics1.jsx

@@ -24,12 +24,12 @@ const Mechanics1 = ({page, setPage}) => {
   return (
     <Box sx={sectionStyle}>
       <IconButton>
-        <img src={back} alt='back' style={{ height: '30px' }} />
+        <img src={back} alt='back' style={{ height: '30px' }} loading="lazy"  />
       </IconButton>
 
       <Card sx={{ width: '85vw', height: '80vh', borderRadius: '15px', display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
         <CardContent>
-          <img src={timer} alt='timer' height='40px'/>
+          <img src={timer} alt='timer' height='40px' loading="lazy" />
 
           <Typography variant="h5" component="h4" sx={{ mb: 4, mt: 4, fontSize: '20px', color: '#333F61', textAlign: 'center', fontFamily:'Quicksand' }}>
             Speak the below word
@@ -40,10 +40,10 @@ const Mechanics1 = ({page, setPage}) => {
 
           <Box sx={{ display: 'flex', justifyContent: 'center' }}>
           <Button variant="contained" sx={{  background: 'linear-gradient(45deg, #A856FF 30%, #710EDC 90%)', color: 'white', m: 1, textTransform: 'none', width: '100px' }}>
-              <img src={listen} alt='listen' height='15px' /><span  style={{marginLeft:'4px', fontFamily:'Quicksand'}}>Listen</span>
+              <img src={listen} alt='listen' height='15px' loading="lazy"  /><span  style={{marginLeft:'4px', fontFamily:'Quicksand'}}>Listen</span>
             </Button>
             <Button variant="contained" sx={{ background: 'linear-gradient(45deg, #84F630 30%, #409500 90%)', color: 'white', m: 1, textTransform: 'none', width: '100px' }}>
-              <img src={speak} alt='speak' height='15px' /><span style={{marginLeft:'4px', fontFamily:'Quicksand'}}>Speak</span>
+              <img src={speak} alt='speak' height='15px' loading="lazy"  /><span style={{marginLeft:'4px', fontFamily:'Quicksand'}}>Speak</span>
             </Button>
           </Box>
         </CardContent>
@@ -54,7 +54,7 @@ const Mechanics1 = ({page, setPage}) => {
           <img src={level} alt='level' height='100px'/>
           </Box>
           <Button variant="contained" onClick={()=> setPage(page+1)} sx={{  background: 'linear-gradient(45deg, #FF9050 30%, #E15404 90%)', color: 'white', mt: 4,mr:4, textTransform: 'none', width: '90px', height:'35px' }}>
-            <span style={{marginRight:'4px'}}>Next</span><img src={arrow} alt='arrow' height='15px' />
+            <span style={{marginRight:'4px'}}>Next</span><img src={arrow} alt='arrow' height='15px' loading="lazy"  />
           </Button>
         </Box>
         </Box>

src/components/Practice/Mechanics2.jsx

@@ -23,34 +23,34 @@ const Mechanics2 = ({page, setPage}) => {
   return (
     <Box sx={sectionStyle}>
       <IconButton>
-        <img src={back} alt='back' style={{ height: '30px' }} />
+        <img src={back} alt='back' style={{ height: '30px' }} loading="lazy"  />
       </IconButton>
 
       <Card sx={{ width: '85vw', height: '80vh', borderRadius: '15px', display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
         <CardContent>
-          <img src={timer} alt='timer' height='40px'/>
+          <img src={timer} alt='timer' height='40px' loading="lazy" />
           <Typography variant="h5" component="h4" sx={{ mb:2, fontSize: '20px', color: '#333F61', textAlign: 'center' }}>
            Guess the below image
           </Typography>
 
           <Box sx={{display:'flex', justifyContent:'center', mb:4}}>
-            <img src={elephant} alt='elephant' height='120px' />
+            <img src={elephant} alt='elephant' height='120px' loading="lazy"  />
           </Box>
 
           <Box sx={{ display: 'flex', justifyContent: 'center' }}>
             <Button variant="contained" sx={{ background: 'linear-gradient(45deg, #84F630 30%, #409500 90%)', color: 'white', m: 1, textTransform: 'none', width: '100px' }}>
-              <img src={speak} alt='speak' height='15px' /><span style={{marginLeft:'4px'}}>Speak</span>
+              <img src={speak} alt='speak' height='15px' loading="lazy"  /><span style={{marginLeft:'4px'}}>Speak</span>
             </Button>
           </Box>
         </CardContent>
         <Box>
         <Divider />
         <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
           <Box sx={{position:'relative', right:'60px'}}>
-          <img src={level} alt='level' height='100px'/>
+          <img src={level} alt='level' height='100px'loading="lazy" />
           </Box>
           <Button variant="contained" onClick={()=> setPage(page+1)} sx={{  background: 'linear-gradient(45deg, #FF9050 30%, #E15404 90%)', color: 'white', mt: 4,mr:4, textTransform: 'none', width: '90px', height:'35px' }}>
-            <span style={{marginRight:'4px'}}>Next</span><img src={arrow} alt='arrow' height='15px' />
+            <span style={{marginRight:'4px'}}>Next</span><img src={arrow} alt='arrow' height='15px' loading="lazy"  />
           </Button>
         </Box>
         </Box>

src/components/Practice/Mechanics3.jsx

@@ -108,10 +108,10 @@ const Mechanics2 = ({
       setWords(randomizeArray(wordsArr));
     } else {
       let wordsToShow = [];
-      if (type == "audio") {
+      if (type === "audio") {
         wordsToShow = allWords?.filter((elem) => elem != wordToSimilar);
       }
-      if (type == "fillInTheBlank") {
+      if (type === "fillInTheBlank") {
         wordsToShow = allWords
           ?.join(" ")
           ?.split(" ")
@@ -383,8 +383,9 @@ const Mechanics2 = ({
           marginBottom: "30px",
         }}
       >
-        {words?.map((elem) => (
+        {words?.map((elem,index) => (
           <Box
+            key={index}
             className={`${
               type === "audio" && selectedWord === elem
                 ? selectedWord === parentWords

src/components/Practice/Mechanics4.jsx

@@ -165,7 +165,7 @@ const Mechanics4 = ({
             paddingX: type === "word" ? 0 : "20px",
           }}
         >
-          {selectedWords?.map((elem) => (
+          {selectedWords?.map((elem, index) => (
             <span
               onClick={() => handleWords(elem, true)}
               style={{
@@ -183,14 +183,15 @@ const Mechanics4 = ({
                 cursor: "pointer",
                 marginLeft: type === "word" ? 0 : "20px",
               }}
+              key={index}
             >
               {elem}
             </span>
           ))}
         </Box>
       </Box>
       <Box sx={{ display: "flex", justifyContent: "center", mb: 3 }}>
-        {words?.map((elem) => (
+        {words?.map((elem,index) => (
           <>
             {type === "word" ? (
               <Box
@@ -207,6 +208,7 @@ const Mechanics4 = ({
                   borderRadius: "12px",
                   border: "5px solid #10618E",
                 }}
+                key={index}
               >
                 <span
                   style={{

src/components/Practice/Mechanics5.jsx

@@ -49,11 +49,11 @@ const Mechanics5 = ({ page, setPage, setVoiceText, setRecordedAudio, setVoiceAni
             <Box sx={{ display: 'flex', justifyContent: 'center' }}>
                 <Grid container sx={{ width: '80%', justifyContent: 'center', mb: 2, mt: 8 }}>
                     <Grid xs={5}>
-                        <img src={seePictureAndTell} style={{ borderRadius: '20px' }} alt='' />
+                        <img src={seePictureAndTell} style={{ borderRadius: '20px' }} alt='seePictureAndTell' loading="lazy"  />
                     </Grid>
                     <Grid xs={7}>
                         {sentences?.map((elem, i) => (
-                            <Box mt={i > 0 && 3} sx={{ display: 'flex' }}>
+                            <Box mt={i > 0 && 3} sx={{ display: 'flex' }} key={i}>
                                 <audio
                                     ref={audioRef}
                                     preload="metadata"