Improving the performance of the homepage by reducing the domsize

package.json

@@ -59,6 +59,7 @@
     "@sanity/client": "^5.2.1",
     "@sanity/image-url": "^1.0.2",
     "@sentry/nextjs": "^7.77.0",
+    "@tanstack/react-virtual": "^3.5.1",
     "@umalqura/core": "^0.0.7",
     "@xstate/react": "^3.0.1",
     "classnames": "^2.3.2",

src/components/chapters/ChapterAndJuzList.module.scss

@@ -1,24 +1,7 @@
 @use "src/styles/breakpoints";
 
-// surah layout (grid layout)
-.surahLayout {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  @include breakpoints.tablet {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--spacing-small);
-  }
-  @include breakpoints.desktop {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: var(--spacing-small);
-    grid-template-rows: masonry;
-  }
-}
-
 .chapterContainer {
+  flex: 1;
   background-color: var(--color-background-default);
   border-radius: var(--border-radius-default);
 }
@@ -30,17 +13,6 @@
   }
 }
 
-// juz layout (masonry layout)
-.juzLayout {
-  @include breakpoints.tablet {
-    column-count: 2;
-  }
-  @include breakpoints.desktop {
-    column-count: 3;
-  }
-  column-gap: 1em;
-}
-
 // tabs
 .tabsContainer {
   padding-block-end: var(--spacing-medium);

src/components/chapters/ChapterAndJuzList.tsx

@@ -1,22 +1,18 @@
-/* eslint-disable max-lines */
 /* eslint-disable react/no-multi-comp */
 import React, { useState, useMemo } from 'react';
 
-import classNames from 'classnames';
 import dynamic from 'next/dynamic';
 import Trans from 'next-translate/Trans';
 import useTranslation from 'next-translate/useTranslation';
 
-import Link from '../dls/Link/Link';
-import SurahPreviewRow from '../dls/SurahPreview/SurahPreviewRow';
 import Tabs from '../dls/Tabs/Tabs';
 
 import styles from './ChapterAndJuzList.module.scss';
 import ChapterAndJuzListSkeleton from './ChapterAndJuzListSkeleton';
+import SurahView from './SurahView';
 
 import CaretDownIcon from '@/icons/caret-down.svg';
 import { logButtonClick, logValueChange } from '@/utils/eventLogger';
-import { shouldUseMinimalLayout, toLocalizedNumber } from '@/utils/locale';
 import Chapter from 'types/Chapter';
 
 enum View {
@@ -48,23 +44,10 @@ enum Sort {
   DESC = 'descending',
 }
 
-const MOST_VISITED_CHAPTERS = {
-  1: true,
-  2: true,
-  3: true,
-  4: true,
-  18: true,
-  32: true,
-  36: true,
-  55: true,
-  56: true,
-  67: true,
-};
-
 const ChapterAndJuzList: React.FC<ChapterAndJuzListProps> = ({
   chapters,
 }: ChapterAndJuzListProps) => {
-  const { t, lang } = useTranslation();
+  const { t } = useTranslation();
   const [view, setView] = useState(View.Surah);
   const [sortBy, setSortBy] = useState(Sort.ASC);
 
@@ -141,37 +124,11 @@ const ChapterAndJuzList: React.FC<ChapterAndJuzListProps> = ({
           </div>
         )}
       </div>
-      <div
-        className={classNames({
-          [styles.surahLayout]: view === View.Surah || view === View.RevelationOrder,
-          [styles.juzLayout]: view === View.Juz,
-        })}
-      >
-        {view === View.Surah &&
-          sortedChapters.map((chapter) => (
-            <div className={styles.chapterContainer} key={chapter.id}>
-              <Link
-                href={`/${chapter.id}`}
-                shouldPrefetch={MOST_VISITED_CHAPTERS[Number(chapter.id)] === true}
-              >
-                <SurahPreviewRow
-                  chapterId={Number(chapter.id)}
-                  description={`${toLocalizedNumber(chapter.versesCount, lang)} ${t(
-                    'common:ayahs',
-                  )}`}
-                  surahName={chapter.transliteratedName}
-                  surahNumber={Number(chapter.id)}
-                  translatedSurahName={chapter.translatedName as string}
-                  isMinimalLayout={shouldUseMinimalLayout(lang)}
-                />
-              </Link>
-            </div>
-          ))}
-        {view === View.Juz && <JuzView isDescending={sortBy === Sort.DESC} />}
-        {view === View.RevelationOrder && (
-          <RevelationOrderView isDescending={sortBy === Sort.DESC} chapters={chapters} />
-        )}
-      </div>
+      {view === View.Surah && <SurahView sortedChapters={sortedChapters} />}
+      {view === View.Juz && <JuzView isDescending={sortBy === Sort.DESC} />}
+      {view === View.RevelationOrder && (
+        <RevelationOrderView isDescending={sortBy === Sort.DESC} chapters={chapters} />
+      )}
     </>
   );
 };

src/components/chapters/JuzView.module.scss

@@ -1,5 +1,16 @@
 @use "src/styles/breakpoints";
 
+// juz layout (masonry layout)
+.juzLayout {
+  @include breakpoints.tablet {
+    column-count: 2;
+  }
+  @include breakpoints.desktop {
+    column-count: 3;
+  }
+  column-gap: 1em;
+}
+
 .juzContainer + .juzContainer {
   margin-block-start: var(--spacing-small);
   @include breakpoints.tablet {

src/components/chapters/JuzView.tsx

@@ -19,7 +19,6 @@ const JuzView = ({ isDescending }: JuzViewProps) => {
   const { t, lang } = useTranslation();
   const [juzMappings, setJuzMappings] = useState([]);
   const chaptersData = useContext(DataContext);
-
   useEffect(() => {
     getAllJuzMappings()
       .then((data) => Object.entries(data))
@@ -35,9 +34,8 @@ const JuzView = ({ isDescending }: JuzViewProps) => {
   if (juzMappings.length === 0) {
     return <div className={styles.loadingContainer} />;
   }
-
   return (
-    <>
+    <div className={styles.juzLayout}>
       {sortedJuzIds.map((juzEntry) => {
         const [juzId, chapterAndVerseMappings] = juzEntry;
         const chapterIds = Object.keys(chapterAndVerseMappings);
@@ -76,7 +74,7 @@ const JuzView = ({ isDescending }: JuzViewProps) => {
           </div>
         );
       })}
-    </>
+    </div>
   );
 };
 

src/components/chapters/RevelationOrderView.tsx

@@ -6,6 +6,7 @@ import { Translate } from 'next-translate';
 import useTranslation from 'next-translate/useTranslation';
 
 import styles from './ChapterAndJuzList.module.scss';
+import VirtualGrid from './VirtualGrid';
 
 import SurahPreviewRow from '@/dls/SurahPreview/SurahPreviewRow';
 import usePersistPreferenceGroup from '@/hooks/auth/usePersistPreferenceGroup';
@@ -72,33 +73,41 @@ const RevelationOrderView = ({ isDescending, chapters }: RevelationOrderViewProp
             ),
     [isDescending, chapters],
   );
-
   return (
     <>
-      {sortedChaptersByRevelationOrder.map((chapter, revelationOrderIndex) => (
-        <div
-          role="button"
-          tabIndex={0}
-          className={styles.chapterContainer}
-          key={chapter.id}
-          onClick={() => onSurahClicked(chapter.id)}
-          onKeyPress={() => onSurahClicked(chapter.id)}
-        >
-          <SurahPreviewRow
-            chapterId={Number(chapter.id)}
-            description={getChapterDescription(chapter, t)}
-            surahName={`${chapter.transliteratedName}`}
-            surahNumber={
-              isDescending
-                ? QURAN_CHAPTERS_COUNT - Number(revelationOrderIndex)
-                : Number(revelationOrderIndex + 1)
-            } // Show the number based on the revelation order instead of the surah number.
-            translatedSurahName={getTranslatedSurahName(chapter, t, lang)}
-            isMinimalLayout={false}
-            isLoading={isLoading && clickedSurahId === chapter.id}
-          />
-        </div>
-      ))}
+      <VirtualGrid
+        renderRow={(rowIndex, gridNumCols) => {
+          const row = Array.from({ length: gridNumCols }).map((EMPTY, colIndex) => {
+            const revelationOrderIndex = rowIndex * gridNumCols + colIndex;
+            const chapter = sortedChaptersByRevelationOrder[revelationOrderIndex];
+            return (
+              <div
+                role="button"
+                tabIndex={0}
+                className={styles.chapterContainer}
+                key={chapter.id}
+                onClick={() => onSurahClicked(chapter.id)}
+                onKeyPress={() => onSurahClicked(chapter.id)}
+              >
+                <SurahPreviewRow
+                  chapterId={Number(chapter.id)}
+                  description={getChapterDescription(chapter, t)}
+                  surahName={`${chapter.transliteratedName}`}
+                  surahNumber={
+                    isDescending
+                      ? QURAN_CHAPTERS_COUNT - Number(revelationOrderIndex)
+                      : Number(revelationOrderIndex + 1)
+                  } // Show the number based on the revelation order instead of the surah number.
+                  translatedSurahName={getTranslatedSurahName(chapter, t, lang)}
+                  isMinimalLayout={false}
+                  isLoading={isLoading && clickedSurahId === chapter.id}
+                />
+              </div>
+            );
+          });
+          return row;
+        }}
+      />
     </>
   );
 };

src/components/chapters/SurahView.tsx

@@ -0,0 +1,63 @@
+import useTranslation from 'next-translate/useTranslation';
+
+import Link from '../dls/Link/Link';
+import SurahPreviewRow from '../dls/SurahPreview/SurahPreviewRow';
+
+import styles from './ChapterAndJuzList.module.scss';
+import VirtualGrid from './VirtualGrid';
+
+import Chapter from '@/types/Chapter';
+import { shouldUseMinimalLayout, toLocalizedNumber } from '@/utils/locale';
+
+const MOST_VISITED_CHAPTERS = {
+  1: true,
+  2: true,
+  3: true,
+  4: true,
+  18: true,
+  32: true,
+  36: true,
+  55: true,
+  56: true,
+  67: true,
+};
+
+type SurahViewProps = {
+  sortedChapters: Chapter[];
+};
+
+const SurahView: React.FC<SurahViewProps> = ({ sortedChapters }: SurahViewProps) => {
+  const { t, lang } = useTranslation();
+  return (
+    <VirtualGrid
+      renderRow={(rowIndex, gridNumCols) => {
+        const row = Array.from({ length: gridNumCols }).map((EMPTY, colIndex) => {
+          const cellIndex = rowIndex * gridNumCols + colIndex;
+          const chapter = sortedChapters[cellIndex];
+          return (
+            <div key={chapter.id} className={styles.chapterContainer}>
+              <Link
+                href={`/${chapter.id}`}
+                shouldPrefetch={MOST_VISITED_CHAPTERS[Number(chapter.id)] === true}
+              >
+                <SurahPreviewRow
+                  chapterId={Number(chapter.id)}
+                  description={`${toLocalizedNumber(chapter.versesCount, lang)} ${t(
+                    'common:ayahs',
+                  )}`}
+                  surahName={chapter.transliteratedName}
+                  surahNumber={Number(chapter.id)}
+                  translatedSurahName={chapter.translatedName as string}
+                  isMinimalLayout={shouldUseMinimalLayout(lang)}
+                />
+              </Link>
+            </div>
+          );
+        });
+        return row;
+      }}
+    />
+  );
+};
+
+export default SurahView;