Merge pull request #185 from gita/skeleton-loader

added skeleton where needed
gita · Aug 11, 2023 · 9c0a141 · 9c0a141
2 parents f1b340c + a5c2b38
commit 9c0a141
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 38 deletions.
diff --git a/app/chapter/[chapterNumber]/verse/[verseNumber]/verse-page.tsx b/app/chapter/[chapterNumber]/verse/[verseNumber]/verse-page.tsx
@@ -11,6 +11,7 @@ import { SvgFloralDivider } from "../../../../../components/svgs";
 import Translation from "../../../../../components/Verse/Translation";
 import Commentary from "../../../../../components/Verse/Commentary";
 import PageHeader from "../../../../../components/Headers/PageHeader";
+import { Skeleton } from "../../../../../components/Shared/Skeleton";
 
 type Props = {
   chapterNumber: string;
@@ -107,15 +108,21 @@ export default function VersePage({ chapterNumber, verseNumber }: Props) {
         >
           BG {currentVerse?.chapter_number}.{currentVerse?.verse_number}
         </h1>
-        {devnagari && (
+        {devnagari && currentVerse.text ? (
           <p
             className={classNames(
               "font-dev text-my-orange mt-8 max-w-md mx-auto",
               styles.fontSize.subHeading1
             )}
           >
-            {currentVerse?.text}
+            {currentVerse.text}
           </p>
+        ) : (
+          <div className="flex flex-col items-center w-full max-w-md mx-auto pt-10">
+            <Skeleton height="h-8" width="w-full" margin="mb-2" />
+            <Skeleton height="h-8" width="w-5/6" margin="mb-2" />
+            <Skeleton height="h-8" width="w-4/5" margin="mb-2" />
+          </div>
         )}
         {verseText && (
           <p
@@ -127,15 +134,27 @@ export default function VersePage({ chapterNumber, verseNumber }: Props) {
             {currentVerse?.transliteration}
           </p>
         )}
-        {synonyms && (
+        {synonyms && currentVerse?.word_meanings ? (
           <p
             className={classNames(
               "mt-6 mx-auto dark:text-gray-50",
               styles.fontSize.subHeading2
             )}
           >
-            {currentVerse?.word_meanings}
+            {currentVerse.word_meanings}
           </p>
+        ) : (
+          <>
+            <div className="flex flex-col items-center w-full max-w-md mx-auto pt-3">
+              <Skeleton height="h-5" width="w-full" margin="mb-3" />
+              <Skeleton height="h-5" width="w-5/6" margin="mb-3" />
+            </div>
+            <div className="flex flex-col items-center w-full pt-3">
+              <Skeleton height="h-5" width="w-full" margin="mb-3" />
+              <Skeleton height="h-5" width="w-5/6" margin="mb-3" />
+              <Skeleton height="h-5" width="w-4/5" margin="mb-3" />
+            </div>
+          </>
         )}
         {(translation || purport) && (
           <SvgFloralDivider

diff --git a/components/Home/VerseOfDay.tsx b/components/Home/VerseOfDay.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { gql, ApolloQueryResult, useApolloClient } from "@apollo/client";
 import Link from "next/link";
+import { Skeleton } from "../Shared/Skeleton";
 
 interface DailyVerse {
   verseNumber: number;
@@ -68,21 +69,32 @@ const VerseOfDay = () => {
   return (
     <div className="relative max-w-7xl mx-auto z-10 px-4 sm:px-6 mt-24">
       <div className="bg-white dark:bg-dark-100 shadow-lg rounded-xl px-12 pb-8 pt-5 text-gray-400">
-        <h2 className="text-my-orange font-bold mb-4 divider line one-line px-4">
-          Verse of the day - BG {dailyVerse?.chapterNumber}.
-          {dailyVerse?.verseNumber}
-        </h2>
-        <p className="text-lg">
-          {dailyVerse?.gitaTranslationsByVerseId?.nodes[0]?.description}{" "}
-        </p>
-        <button className="uppercase text-black dark:text-white mt-4 font-bold text-sm hover:text-gray-700 dark:hover:text-gray-400 focus:outline-none">
-          <Link
-            href={`chapter/${dailyVerse?.chapterNumber}/verse/${dailyVerse?.verseNumber}`}
-            shallow
-          >
-            See more
-          </Link>
-        </button>
+        {dailyVerse ? (
+          <>
+            <h2 className="text-my-orange font-bold mb-4 divider line one-line px-4">
+              Verse of the day - BG {dailyVerse?.chapterNumber}.
+              {dailyVerse?.verseNumber}
+            </h2>
+            <p className="text-lg">
+              {dailyVerse?.gitaTranslationsByVerseId?.nodes[0]?.description}{" "}
+            </p>
+            <button className="uppercase text-black dark:text-white mt-4 font-bold text-sm hover:text-gray-700 dark:hover:text-gray-400 focus:outline-none">
+              <Link
+                href={`chapter/${dailyVerse?.chapterNumber}/verse/${dailyVerse?.verseNumber}`}
+                shallow
+              >
+                See more
+              </Link>
+            </button>
+          </>
+        ) : (
+          <>
+            <Skeleton height="h-4" width="w-2/12" margin="my-4" />
+            <Skeleton height="h-5" width="w-10/12" margin="mb-3" />
+            <Skeleton height="h-5" width="w-9/12" margin="mb-4" />
+            <Skeleton height="h-5" width="w-1/12" margin="mb-3" />
+          </>
+        )}
       </div>
     </div>
   );

diff --git a/components/Shared/Skeleton.tsx b/components/Shared/Skeleton.tsx
@@ -0,0 +1,15 @@
+import { FC } from "react";
+
+type SkeletonProps = {
+  height: string;
+  width: string;
+  margin: string;
+};
+
+export const Skeleton: FC<SkeletonProps> = ({ height, width, margin }) => {
+  return (
+    <div
+      className={`${height} ${width} ${margin} rounded-md bg-gray-300 animate-pulse`}
+    />
+  );
+};
diff --git a/components/Verse/Commentary.tsx b/components/Verse/Commentary.tsx
@@ -1,6 +1,7 @@
 import useMyStyles from "../../hooks/useMyStyles";
 import classNames from "../../utils/classNames";
 import splitIntoParagraphs from "../../utils/splitIntoParagraphs";
+import { Skeleton } from "../Shared/Skeleton";
 
 interface Props {
   commentaryData: GitaLanguage[] | undefined;
@@ -21,17 +22,27 @@ export default function Commentary({ commentaryData }: Props) {
       >
         Commentary
       </h1>
-      {paragraphs?.map((paragraph) => (
-        <p
-          key={paragraph}
-          className={classNames(
-            "mt-6 mx-auto text-justify dark:text-gray-50 whitespace-pre-wrap",
-            styles.fontSize.para
-          )}
-        >
-          {paragraph}
-        </p>
-      ))}
+      {paragraphs?.[0] ? (
+        paragraphs.map((paragraph) => (
+          <p
+            key={paragraph}
+            className={classNames(
+              "mt-6 mx-auto text-justify dark:text-gray-50 whitespace-pre-wrap",
+              styles.fontSize.para
+            )}
+          >
+            {paragraph}
+          </p>
+        ))
+      ) : (
+        <>
+          <Skeleton width="w-full" height="h-5" margin="my-3" />
+          <Skeleton width="w-full" height="h-5" margin="my-3" />
+          <Skeleton width="w-full" height="h-5" margin="my-3" />
+          <Skeleton width="w-full" height="h-5" margin="my-3" />
+          <Skeleton width="w-4/5" height="h-5" margin="my-3" />
+        </>
+      )}
     </div>
   );
 }
diff --git a/components/Verse/Translation.tsx b/components/Verse/Translation.tsx
@@ -1,5 +1,6 @@
 import useMyStyles from "../../hooks/useMyStyles";
 import classNames from "../../utils/classNames";
+import { Skeleton } from "../Shared/Skeleton";
 
 interface Props {
   translationData: GitaLanguage[] | undefined;
@@ -18,14 +19,21 @@ export default function Translation({ translationData }: Props) {
       >
         Translation
       </h1>
-      <p
-        className={classNames(
-          "mt-6 mx-auto text-justify dark:text-gray-50 ",
-          styles.fontSize.para
-        )}
-      >
-        {translationData ? translationData[0]?.description : ""}
-      </p>
+      {translationData && translationData[0]?.description ? (
+        <p
+          className={classNames(
+            "mt-6 mx-auto text-justify dark:text-gray-50 ",
+            styles.fontSize.para
+          )}
+        >
+          {translationData[0].description}
+        </p>
+      ) : (
+        <>
+          <Skeleton height="h-5" width="w-full" margin="my-3" />
+          <Skeleton height="h-5" width="w-4/5" margin="my-3" />
+        </>
+      )}
     </div>
   );
 }