Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-11 17:13:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: use fallback with loading

Browse Source
This commit is contained in:
iCrawl
2022-08-23 01:43:10 +02:00
parent 360936140b
commit 2ecb862e76
7 changed files with 91 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/website/src/components/model/Class.tsx
View File

@@ -1,8 +1,12 @@
import { Skeleton } from '@mantine/core';
import { useRouter } from 'next/router';
import { DocContainer } from '../DocContainer';
import { ConstructorSection, MethodsSection, PropertiesSection } from '../Sections';
import type { ApiClassJSON } from '~/DocModel/ApiNodeJSONEncoder';
export function Class({ data }: { data: ApiClassJSON }) {
const router = useRouter();
return (
<DocContainer
name={data.name}
@@ -17,8 +21,12 @@ export function Class({ data }: { data: ApiClassJSON }) {
properties={data.properties}
>
{data.constructor ? <ConstructorSection data={data.constructor} /> : null}
<PropertiesSection data={data.properties} />
<MethodsSection data={data.methods} />
<Skeleton visible={router.isFallback}>
<PropertiesSection data={data.properties} />
</Skeleton>
<Skeleton visible={router.isFallback}>
<MethodsSection data={data.methods} />
</Skeleton>
</DocContainer>
);
}

32
packages/website/src/components/model/Enum.tsx
View File

@@ -1,5 +1,6 @@
import { Stack } from '@mantine/core';
import { Skeleton, Stack } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { useRouter } from 'next/router';
import { VscSymbolEnumMember } from 'react-icons/vsc';
import { CodeListing, CodeListingSeparatorType } from '../CodeListing';
import { DocContainer } from '../DocContainer';
@@ -7,23 +8,26 @@ import { Section } from '../Section';
import type { ApiEnumJSON } from '~/DocModel/ApiNodeJSONEncoder';
export function Enum({ data }: { data: ApiEnumJSON }) {
const router = useRouter();
const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
return (
<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
<Section title="Members" icon={<VscSymbolEnumMember size={20} />} padded dense={matches}>
<Stack>
{data.members.map((member) => (
<CodeListing
key={member.name}
name={member.name}
separator={CodeListingSeparatorType.Value}
typeTokens={member.initializerTokens}
summary={member.summary}
/>
))}
</Stack>
</Section>
<Skeleton visible={router.isFallback}>
<Section title="Members" icon={<VscSymbolEnumMember size={20} />} padded dense={matches}>
<Stack>
{data.members.map((member) => (
<CodeListing
key={member.name}
name={member.name}
separator={CodeListingSeparatorType.Value}
typeTokens={member.initializerTokens}
summary={member.summary}
/>
))}
</Stack>
</Section>
</Skeleton>
</DocContainer>
);
}

8
packages/website/src/components/model/Function.tsx
View File

@@ -1,8 +1,12 @@
import { Skeleton } from '@mantine/core';
import { useRouter } from 'next/router';
import { DocContainer } from '../DocContainer';
import { ParametersSection } from '../Sections';
import type { ApiFunctionJSON } from '~/DocModel/ApiNodeJSONEncoder';
export function Function({ data }: { data: ApiFunctionJSON }) {
const router = useRouter();
return (
<DocContainer
name={`${data.name}${data.overloadIndex && data.overloadIndex > 1 ? ` (${data.overloadIndex})` : ''}`}
@@ -11,7 +15,9 @@ export function Function({ data }: { data: ApiFunctionJSON }) {
summary={data.summary}
typeParams={data.typeParameters}
>
<ParametersSection data={data.parameters} />
<Skeleton visible={router.isFallback}>
<ParametersSection data={data.parameters} />
</Skeleton>
</DocContainer>
);
}

12
packages/website/src/components/model/Interface.tsx
View File

@@ -1,8 +1,12 @@
import { Skeleton } from '@mantine/core';
import { useRouter } from 'next/router';
import { DocContainer } from '../DocContainer';
import { MethodsSection, PropertiesSection } from '../Sections';
import type { ApiInterfaceJSON } from '~/DocModel/ApiNodeJSONEncoder';
export function Interface({ data }: { data: ApiInterfaceJSON }) {
const router = useRouter();
return (
<DocContainer
name={data.name}
@@ -13,8 +17,12 @@ export function Interface({ data }: { data: ApiInterfaceJSON }) {
methods={data.methods}
properties={data.properties}
>
<PropertiesSection data={data.properties} />
<MethodsSection data={data.methods} />
<Skeleton visible={router.isFallback}>
<PropertiesSection data={data.properties} />
</Skeleton>
<Skeleton visible={router.isFallback}>
<MethodsSection data={data.methods} />
</Skeleton>
</DocContainer>
);
}