perf(kanvas): lazy-load non-critical sections

Signed-off-by: Azizah2023 <[email protected]>

Author: Azizah2023

package-lock.json

@@ -47,7 +47,8 @@ const Pagination = ({ TOCData, chapterData, location }) => {
             <Button $secondary title="Next Chapter"
               className="next-chapter-btn"
               $url={`/learn/learning-paths/${chapterData.fields.learnpath}/${chapterData.fields.course}/${getActiveServiceMesh(chapterData)}/${nextChapter}/`}
-              $external={false} />
+              $external={false}
+            />
           </div>
         </div>
       </PaginationWrapper>)

src/components/Learn-Components/Pagination/index.js

@@ -33,7 +33,8 @@ const ResultBox = ({ score, resetQuiz,correct, incorrect,total  }) => (
       <div onClick={resetQuiz}>
         <Button $secondary title="Go to Learning Paths"
           $url={"/learn/learning-paths"}
-          $external={false} />
+          $external={false}
+        />
       </div>
     </div>
   </div>
@@ -118,7 +119,8 @@ const QuestionBox = (props) => {
             <div className="quizbox__progress--score quizbox__progress--control" onClick={() => {
               props.prevQuestion();
               setSelectedAnswer(null);
-            }}>
+            }}
+            >
               <BsArrowLeft className="quizbox__progress-control__icon"/>
               <label>Previous</label>
             </div>
@@ -127,7 +129,8 @@ const QuestionBox = (props) => {
             <div className="quizbox__progress--score quizbox__progress--control" onClick={() => {
               props.nextQuestion();
               setSelectedAnswer(null);
-            }}>
+            }}
+            >
               <label>{props.answers.length === props.questionIndex ? "Finish" : "Next"} </label>
               <BsArrowRight className="quizbox__progress-control__icon"/>
             </div>

src/components/Learn-Components/QuizModal/quiz-component.js

@@ -279,7 +279,8 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
                             control={<Switch disabled
                               checked={selectedSubAddOns["academy-theory"] || false}
                               onChange={(e) => handleSubAddOnToggle("academy-theory", e.target.checked)}
-                              color="primary" />}
+                              color="primary"
+                            />}
                             sx={formControlStyles.base}
                           />
                           <FeatureDetails
@@ -306,7 +307,8 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
                             control={<Switch sx={formControlStyles.switch}
                               checked={selectedSubAddOns["academy-practical"] || false}
                               onChange={(e) => handleSubAddOnToggle("academy-practical", e.target.checked)}
-                              color="primary" />}
+                              color="primary"
+                            />}
                             sx={formControlStyles.base}
                           />
                           <FeatureDetails
@@ -395,7 +397,7 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
                                             ),
                                           })) || [];
                                         })()}
-                                  />
+                        />
                         <Box sx={boxStyles.disclaimerSection}>
                           <Typography variant="body2" sx={typographyStyles.italic}>
                             Looking for a plan larger than 2,500 learners? Great! <a href="/company/contact">Let us know</a>.

src/components/Pricing/PricingAddons/index.js

@@ -56,7 +56,8 @@ const Table = ({ columns, data, spec }) => {
               <React.Fragment key={`row${i}`}>
                 <tr key={`row${i}`} id={`row${i}`} className="primaryRow" {...row.getRowProps()} onClick={() => {
                   let e = isCollapsed; e[i] = !isCollapsed[i]; setCollapse([...e]);
-                }}>
+                }}
+                >
                   <td>
                     {
                       (non_functional.find(ele => ele.name.includes(row.original.mesh_name))) ?

src/components/SMI-Table/index.js

@@ -7,7 +7,8 @@ const TopPromotionalBanner = () => {
     <>
       <TopBannercontainer>
         <a href="https://meshery.io/blog/meshery-v07-release-announcement" rel="noreferrer" target="_blank"><p className="content"><img src={Rocket} alt="Five on rocket" /><span>Soar to New Heights with Meshery v0.7.0 &rarr;</span>{/* <span>Try it now &rarr;</span> */}
-        </p></a>
+        </p>
+        </a>
       </TopBannercontainer>
     </>
   );

src/components/TopPromotionalBanner/index.js

@@ -15,7 +15,8 @@ const UpcomingEvents = ({ data }) => {
       <div className="blog-slider swiper">
         <div style={{
           display: "block"
-        }} className="blog-slider__wrp swiper-wrapper">
+        }} className="blog-slider__wrp swiper-wrapper"
+        >
 
           <Swiper
             spaceBetween={50}

src/components/UpcomingEventCard/index.js

@@ -34,7 +34,8 @@ const Table = () => {
             <tr {...headerGroup.getHeaderGroupProps()}>
               {headerGroup.headers.map((column, index) => (
                 <th key={index} {...column.getHeaderProps()}
-                  className={(column.Header == "Service Mesh Pattern" || column.Header == "Category") ? "table-header" : ""}>
+                  className={(column.Header == "Service Mesh Pattern" || column.Header == "Category") ? "table-header" : ""}
+                >
                   <div  >
                     {column.render("Header")}
                     {(column.Header == "Service Mesh Pattern") ?

src/components/service-mesh-patterns-Table/Table.js

@@ -14,5 +14,6 @@ export default Catalog;
 export const Head = () => {
   return <SEO title="Cloud Native Catalog"
     description="The Kubernetes and Cloud Native Catalog. Build, share, innovate with CNCF project-curated best practices."
-    image="/images/meshery-logo-dark-text.webp" />;
+    image="/images/meshery-logo-dark-text.webp"
+  />;
 };

src/pages/cloud-native-management/catalog.js

@@ -14,5 +14,6 @@ export default Aws;
 export const Head = () => {
   return <SEO title="AWS Architecture Diagram"
     description="Create your own AWS architecture diagrams with Kanvas."
-    image="/images/meshery-logo-dark-text.webp" />;
+    image="/images/meshery-logo-dark-text.webp"
+  />;
 };