PulseApp/docs
PulseApp/docs
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Activity

proper loading state for the on this page component

Browse Source 
Took 8 minutes
This commit is contained in:
Braydon 2024-10-13 20:54:12 -04:00
parent e5a797718f
commit e1b7beadbd
2 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/on-this-page.tsx
View File

@ -18,6 +18,7 @@ type Header = {
}; };
const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => { const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
const [loading, setLoading] = useState<boolean>(true);
const [headers, setHeaders] = useState<Header[]>([]); const [headers, setHeaders] = useState<Header[]>([]);
const [activeHeader, setActiveHeader] = useState<string | undefined>( const [activeHeader, setActiveHeader] = useState<string | undefined>(
undefined undefined
@ -45,6 +46,7 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
} }
setHeaders(extractedHeaders); setHeaders(extractedHeaders);
setLoading(false);
}, [page.content]); }, [page.content]);
useEffect(() => { useEffect(() => {
@ -94,8 +96,10 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
{/* Headers */} {/* Headers */}
<ul className="relative"> <ul className="relative">
{headers.length === 0 ? ( {loading ? (
<Skeleton className="w-full h-5 bg-accent rounded-lg" /> <Skeleton className="w-full h-5 bg-accent rounded-lg" />
) : headers.length === 0 ? (
<span className="opacity-75">Nothing ):</span>
) : ( ) : (
headers.map((header: Header) => ( headers.map((header: Header) => (
<li <li

4
src/lib/mdx.ts
View File

@ -44,7 +44,7 @@ const getDocsDirectory = cache(async (): Promise<string> => {
// Pull the latest changes from the repo if we don't have it // Pull the latest changes from the repo if we don't have it
if (!fs.existsSync(cacheDir) || fs.readdirSync(cacheDir).length < 1) { 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 { try {
await simpleGit().clone(DOCS_DIR, cacheDir, { "--depth": 1 }); await simpleGit().clone(DOCS_DIR, cacheDir, { "--depth": 1 });
storeUpdatedRepoTime(); storeUpdatedRepoTime();
@ -55,7 +55,7 @@ const getDocsDirectory = cache(async (): Promise<string> => {
} }
} else if (shouldUpdateRepo()) { } else if (shouldUpdateRepo()) {
// Pull the latest changes from Git // Pull the latest changes from Git
console.log("Updating docs content from Git..."); console.log("Pulling docs content from Git...");
await simpleGit(cacheDir) await simpleGit(cacheDir)
.reset(["--hard"]) // Reset any local changes .reset(["--hard"]) // Reset any local changes
.pull(); // Pull latest changes .pull(); // Pull latest changes