From e1b7beadbda343ebee857ed370253454e93b5cfd Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Sun, 13 Oct 2024 20:54:12 -0400
Subject: [PATCH] proper loading state for the on this page component

Took 8 minutes
---
 src/components/on-this-page.tsx | 6 +++++-
 src/lib/mdx.ts                  | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/on-this-page.tsx b/src/components/on-this-page.tsx
index 2c271a5..b7f75e8 100644
--- a/src/components/on-this-page.tsx
+++ b/src/components/on-this-page.tsx
@@ -18,6 +18,7 @@ type Header = {
 };
 
 const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
+    const [loading, setLoading] = useState<boolean>(true);
     const [headers, setHeaders] = useState<Header[]>([]);
     const [activeHeader, setActiveHeader] = useState<string | undefined>(
         undefined
@@ -45,6 +46,7 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
         }
 
         setHeaders(extractedHeaders);
+        setLoading(false);
     }, [page.content]);
 
     useEffect(() => {
@@ -94,8 +96,10 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
 
             {/* Headers */}
             <ul className="relative">
-                {headers.length === 0 ? (
+                {loading ? (
                     <Skeleton className="w-full h-5 bg-accent rounded-lg" />
+                ) : headers.length === 0 ? (
+                    <span className="opacity-75">Nothing ):</span>
                 ) : (
                     headers.map((header: Header) => (
                         <li
diff --git a/src/lib/mdx.ts b/src/lib/mdx.ts
index e322553..ec48d54 100644
--- a/src/lib/mdx.ts
+++ b/src/lib/mdx.ts
@@ -44,7 +44,7 @@ const getDocsDirectory = cache(async (): Promise<string> => {
 
         // Pull the latest changes from the repo if we don't have it
         if (!fs.existsSync(cacheDir) || fs.readdirSync(cacheDir).length < 1) {
-            console.log("Fetching initial docs from Git...");
+            console.log("Cloning initial docs content from Git...");
             try {
                 await simpleGit().clone(DOCS_DIR, cacheDir, { "--depth": 1 });
                 storeUpdatedRepoTime();
@@ -55,7 +55,7 @@ const getDocsDirectory = cache(async (): Promise<string> => {
             }
         } else if (shouldUpdateRepo()) {
             // Pull the latest changes from Git
-            console.log("Updating docs content from Git...");
+            console.log("Pulling docs content from Git...");
             await simpleGit(cacheDir)
                 .reset(["--hard"]) // Reset any local changes
                 .pull(); // Pull latest changes