| 52 | }); |
| 53 | |
| 54 | export function PageSkeleton() { |
| 55 | let {currentPage, pages} = useRouter(); |
| 56 | let isSubpage = currentPage.exports?.isSubpage; |
| 57 | let section = currentPage.exports?.section || 'Components'; |
| 58 | let isLongForm = isSubpage && section === 'Blog'; |
| 59 | let hasToC = |
| 60 | (!currentPage.exports?.hideNav || section === 'Blog' || section === 'Releases') && |
| 61 | currentPage.tableOfContents?.[0]?.children && |
| 62 | currentPage.tableOfContents?.[0]?.children?.length > 0; |
| 63 | let isWide = !hasToC && !isLongForm && section !== 'Blog' && section !== 'Releases'; |
| 64 | let parentUrl = new URL('./', currentPage.url); |
| 65 | let parentIndex = parentUrl.href; |
| 66 | let parentPageUrl = parentUrl.href.slice(0, -1); |
| 67 | let parentPage = pages.find(p => p.url === parentIndex || p.url === parentPageUrl); |
| 68 | let isComponents = section === 'Components'; |
| 69 | |
| 70 | return ( |
| 71 | <article className={skeletonArticle({isLongForm, isWide})}> |
| 72 | {currentPage.exports?.version && <VersionBadge version={currentPage.exports.version} />} |
| 73 | {currentPage.exports?.isSubpage ? ( |
| 74 | <SubpageHeader currentPage={currentPage} parentPage={parentPage} isLongForm={isLongForm} /> |
| 75 | ) : ( |
| 76 | currentPage.tableOfContents?.[0]?.level === 1 && ( |
| 77 | <H1 isLongForm={isLongForm}>{currentPage.tableOfContents?.[0].title}</H1> |
| 78 | ) |
| 79 | )} |
| 80 | <Skeleton isLoading> |
| 81 | <PageDescription> |
| 82 | <Text> |
| 83 | This is placeholder content for the page description that approximates the typical |
| 84 | length of component descriptions. |
| 85 | </Text> |
| 86 | </PageDescription> |
| 87 | |
| 88 | {isComponents ? ( |
| 89 | <> |
| 90 | {/* VisualExample */} |
| 91 | <SkeletonVisualExample /> |
| 92 | |
| 93 | {/* A few sections with visual examples */} |
| 94 | {[1, 2, 3].map(i => ( |
| 95 | <React.Fragment key={i}> |
| 96 | <H2> |
| 97 | <Text>Section Heading</Text> |
| 98 | </H2> |
| 99 | <P> |
| 100 | <Text> |
| 101 | Placeholder content for a section that describes various aspects of the |
| 102 | component or feature being documented. |
| 103 | </Text> |
| 104 | </P> |
| 105 | <SkeletonVisualExample /> |
| 106 | </React.Fragment> |
| 107 | ))} |
| 108 | </> |
| 109 | ) : ( |
| 110 | <> |
| 111 | {/* A few sections */} |