Skip to content

Commit

Permalink
implement skeleton loader component
Browse files Browse the repository at this point in the history
  • Loading branch information
@sserrata
sserrata committed Oct 10, 2024
1 parent 6845e76 commit 3880c89
Show file tree
Hide file tree
Showing 6 changed files with 105 additions and 95 deletions.
14 changes: 2 additions & 12 deletions packages/docusaurus-theme-openapi-docs/src/theme/ApiItem/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { createPersistanceMiddleware } from "@theme/ApiExplorer/persistanceMiddl
import DocItemLayout from "@theme/ApiItem/Layout";
import type { Props } from "@theme/DocItem";
import DocItemMetadata from "@theme/DocItem/Metadata";
import SkeletonLoader from "@theme/SkeletonLoader";
import clsx from "clsx";
import { ServerObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
import { ParameterObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
Expand Down Expand Up @@ -152,18 +153,7 @@ export default function ApiItem(props: Props): JSX.Element {
<MDXComponent />
</div>
<div className="col col--5 openapi-right-panel__container">
<BrowserOnly
fallback={
<div className="openapi-explorer__loading-container">
<div className="openapi-response__lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
}
>
<BrowserOnly fallback={<SkeletonLoader size="lg" />}>
{() => {
return <ApiExplorer item={api} infoPath={infoPath} />;
}}
Expand Down
43 changes: 15 additions & 28 deletions packages/docusaurus-theme-openapi-docs/src/theme/ParamsDetails/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,18 @@
* LICENSE file in the root directory of this source tree.
* ========================================================================== */

import React, { Suspense, useEffect, useState } from "react";
import React, { Suspense } from "react";

import BrowserOnly from "@docusaurus/BrowserOnly";
import Details from "@theme/Details";
import ParamsItem from "@theme/ParamsItem";
import SkeletonLoader from "@theme/SkeletonLoader";

interface Props {
parameters: any[];
}

const ParamsDetailsComponent: React.FC<Props> = ({ parameters }) => {
const [isClient, setIsClient] = useState(false);

useEffect(() => {
if (typeof window !== "undefined") {
setIsClient(true);
}
}, []);

if (!isClient) {
return (
<div className="openapi-explorer__loading-container">
<div className="openapi-response__lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
);
}

const types = ["path", "query", "header", "cookie"];

return (
Expand Down Expand Up @@ -88,13 +69,19 @@ const ParamsDetailsComponent: React.FC<Props> = ({ parameters }) => {
};

const ParamsDetails: React.FC<Props> = (props) => {
const LazyComponent = React.lazy(() =>
Promise.resolve({ default: ParamsDetailsComponent })
);
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent {...props} />
</Suspense>
<BrowserOnly fallback={<SkeletonLoader size="sm" />}>
{() => {
const LazyComponent = React.lazy(() =>
Promise.resolve({ default: ParamsDetailsComponent })
);
return (
<Suspense fallback={null}>
<LazyComponent {...props} />
</Suspense>
);
}}
</BrowserOnly>
);
};

Expand Down
41 changes: 14 additions & 27 deletions packages/docusaurus-theme-openapi-docs/src/theme/RequestSchema/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,11 @@

import React, { Suspense, useEffect, useState } from "react";

import BrowserOnly from "@docusaurus/BrowserOnly";
import Details from "@theme/Details";
import MimeTabs from "@theme/MimeTabs"; // Assume these components exist
import SchemaNode from "@theme/Schema";
import SkeletonLoader from "@theme/SkeletonLoader";
import TabItem from "@theme/TabItem";
import { createDescription } from "docusaurus-plugin-openapi-docs/lib/markdown/createDescription";
import { MediaTypeObject } from "docusaurus-plugin-openapi-docs/lib/openapi/types";
Expand All @@ -27,27 +29,6 @@ interface Props {
}

const RequestSchemaComponent: React.FC<Props> = ({ title, body, style }) => {
const [isClient, setIsClient] = useState(false);

useEffect(() => {
if (typeof window !== "undefined") {
setIsClient(true);
}
}, []);

if (!isClient) {
return (
<div className="openapi-explorer__loading-container">
<div className="openapi-response__lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
);
}

if (
body === undefined ||
body.content === undefined ||
Expand Down Expand Up @@ -164,13 +145,19 @@ const RequestSchemaComponent: React.FC<Props> = ({ title, body, style }) => {
};

const RequestSchema: React.FC<Props> = (props) => {
const LazyComponent = React.lazy(() =>
Promise.resolve({ default: RequestSchemaComponent })
);
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent {...props} />
</Suspense>
<BrowserOnly fallback={<SkeletonLoader size="sm" />}>
{() => {
const LazyComponent = React.lazy(() =>
Promise.resolve({ default: RequestSchemaComponent })
);
return (
<Suspense fallback={null}>
<LazyComponent {...props} />
</Suspense>
);
}}
</BrowserOnly>
);
};

Expand Down
43 changes: 15 additions & 28 deletions packages/docusaurus-theme-openapi-docs/src/theme/ResponseSchema/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@
* LICENSE file in the root directory of this source tree.
* ========================================================================== */

import React, { Suspense, useEffect, useState } from "react";
import React, { Suspense } from "react";

import BrowserOnly from "@docusaurus/BrowserOnly";
import Details from "@theme/Details";
import MimeTabs from "@theme/MimeTabs"; // Assume these components exist
import {
Expand All @@ -16,6 +17,7 @@ import {
} from "@theme/ResponseExamples";
import SchemaNode from "@theme/Schema";
import SchemaTabs from "@theme/SchemaTabs";
import SkeletonLoader from "@theme/SkeletonLoader";
import TabItem from "@theme/TabItem";
import { createDescription } from "docusaurus-plugin-openapi-docs/lib/markdown/createDescription";
import { MediaTypeObject } from "docusaurus-plugin-openapi-docs/lib/openapi/types";
Expand All @@ -37,27 +39,6 @@ const ResponseSchemaComponent: React.FC<Props> = ({
body,
style,
}): any => {
const [isClient, setIsClient] = useState(false);

useEffect(() => {
if (typeof window !== "undefined") {
setIsClient(true);
}
}, []);

if (!isClient) {
return (
<div className="openapi-explorer__loading-container">
<div className="openapi-response__lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
);
}

if (
body === undefined ||
body.content === undefined ||
Expand Down Expand Up @@ -151,13 +132,19 @@ const ResponseSchemaComponent: React.FC<Props> = ({
};

const ResponseSchema: React.FC<Props> = (props) => {
const LazyComponent = React.lazy(() =>
Promise.resolve({ default: ResponseSchemaComponent })
);
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent {...props} />
</Suspense>
<BrowserOnly fallback={<SkeletonLoader size="md" />}>
{() => {
const LazyComponent = React.lazy(() =>
Promise.resolve({ default: ResponseSchemaComponent })
);
return (
<Suspense fallback={null}>
<LazyComponent {...props} />
</Suspense>
);
}}
</BrowserOnly>
);
};

Expand Down
18 changes: 18 additions & 0 deletions packages/docusaurus-theme-openapi-docs/src/theme/SkeletonLoader/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/* ============================================================================
* Copyright (c) Palo Alto Networks
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
* ========================================================================== */

import React from "react";

interface Props {
size?: "sm" | "md" | "lg";
}

const SkeletonLoader: React.FC<Props> = (props) => {
return <div className={`openapi-skeleton ${props.size ?? "md"}`}></div>;
};

export default SkeletonLoader;
41 changes: 41 additions & 0 deletions packages/docusaurus-theme-openapi-docs/src/theme/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@
--openapi-explorer-padding-input: 0.5rem;
--openapi-explorer-border-color: var(--ifm-toc-border-color);
--openapi-explorer-caret-bg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
--openapi-skeleton-background: var(--ifm-color-emphasis-100);
}

[data-theme="dark"] {
Expand Down Expand Up @@ -163,3 +164,43 @@
.openapi-tabs__heading {
margin-bottom: 1rem;
}

/* Loading Skeleton */
@keyframes pulsing {
0% {
opacity: 1;
background-color: var(--ifm-color-emphasis-100);
}
50% {
opacity: 0.6;
background-color: var(--ifm-toc-border-color);
}
100% {
opacity: 1;
background-color: var(--ifm-color-emphasis-100);
}
}

.openapi-skeleton {
animation: pulsing 2s infinite ease-in-out;
}

/* Loading Skeleton */
.openapi-skeleton {
border-radius: var(--ifm-pre-border-radius);
background-color: var(--openapi-skeleton-background);
max-width: 100%;
margin: 1rem auto;
}

.openapi-skeleton.sm {
height: 100px;
}

.openapi-skeleton.md {
height: 350px;
}

.openapi-skeleton.lg {
height: 96.5%;
}

0 comments on commit 3880c89

Please sign in to comment.