Merge pull request #61 from Quiddlee/feat/add_suspense_to_docs

Feat/add suspense to docs

src/components/DocsComp/DocsComp.tsx

@@ -1,17 +1,23 @@
+import { lazy, Suspense } from 'react';
+
 import useSchemaExplorer from './lib/hooks/useSchemaExplorer';
-import DocsModal from './ui/DocsModal';
 import DocsOverlay from './ui/DocsOverlay';
+import SuspenseFallback from './ui/SuspenseFallback';
 
 type PropsType = {
   setIsDocsShown: React.Dispatch<React.SetStateAction<boolean>>;
   isShown: boolean;
 };
 
+const DocsModal = lazy(() => import('./ui/DocsModal'));
+
 const DocsComp = ({ isShown, setIsDocsShown }: PropsType) => {
   const schemaExplorer = useSchemaExplorer();
   return (
     <DocsOverlay isShown={isShown} setIsDocsShown={setIsDocsShown} explorer={schemaExplorer}>
-      <DocsModal setIsDocsShown={setIsDocsShown} explorer={schemaExplorer} />
+      <Suspense fallback={<SuspenseFallback />}>
+        <DocsModal setIsDocsShown={setIsDocsShown} explorer={schemaExplorer} />
+      </Suspense>
     </DocsOverlay>
   );
 };

src/components/DocsComp/lib/helpers/getEndpointSchema.ts

@@ -1,22 +1,31 @@
-import { SetStateAction } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 
 import introspectionQuery from '@/shared/constants/introspectionQuery';
 import { DocsSchemaType } from '@/shared/types';
 
 export default async function getEndpointSchema(
 	endpoint: string,
-	setter: (value: SetStateAction<DocsSchemaType>) => void,
+	schemaSetter: (value: SetStateAction<DocsSchemaType>) => void,
+	loadingSetter: Dispatch<SetStateAction<boolean>>,
 ) {
-	const response = await fetch(endpoint, {
-		method: 'POST',
-		headers: {
-			'Content-Type': 'application/json',
-		},
-		body: JSON.stringify(introspectionQuery),
-	});
-	if (response.ok && response.status === 200) {
-		const res = await response.json();
-		return setter(res.data.__schema);
+	try {
+		loadingSetter(true);
+		const response = await fetch(endpoint, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify(introspectionQuery),
+		});
+		if (response.ok && response.status === 200) {
+			const res = await response.json();
+			loadingSetter(false);
+			return schemaSetter(res.data.__schema);
+		}
+		loadingSetter(false);
+		return schemaSetter(null);
+	} catch (e) {
+		loadingSetter(false);
+		return schemaSetter(null);
 	}
-	return setter(null);
 }

src/components/DocsComp/ui/DocsLoader.tsx

@@ -0,0 +1,15 @@
+import DocsModalLayout from '@/layouts/DocsModalLayout';
+import Spinner from '@/shared/ui/Spinner';
+
+const DocsLoader = () => {
+  return (
+    <DocsModalLayout>
+      <div className="flex h-full w-full flex-col items-center justify-center">
+        <Spinner indeterminate />
+        <p className="mt-10 text-on-surface">We are loading your docs...</p>
+      </div>
+    </DocsModalLayout>
+  );
+};
+
+export default DocsLoader;

src/components/DocsComp/ui/DocsModal.tsx

@@ -1,12 +1,14 @@
-import { Dispatch, SetStateAction, useEffect } from 'react';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
+import DocsModalLayout from '@/layouts/DocsModalLayout';
 import { useAppContext } from '@/shared/Context/hooks';
 import { DocsExplorerType, SchemaTypeObj } from '@/shared/types';
 import CloseDocsBtn from '@components/DocsComp/ui/CloseDocsBtn';
 
+import DocsLoader from './DocsLoader';
 import DocsRootComp from './DocsRootComp';
 import DocsTypeComp from './DocsTypeComp';
-import SchemaFallaback from './schemaFallback';
+import SchemaFallbackUi from './SchemaFallbackUi';
 import getEndpointSchema from '../lib/helpers/getEndpointSchema';
 
 type PropsType = {
@@ -16,11 +18,14 @@ type PropsType = {
 
 const DocsModal = ({ setIsDocsShown, explorer }: PropsType) => {
   const { currEndpoint, setEndpointSchema, endpointSchema } = useAppContext();
+  const [isLoading, setIsLoading] = useState(false);
+
   useEffect(() => {
-    getEndpointSchema(currEndpoint, setEndpointSchema);
+    getEndpointSchema(currEndpoint, setEndpointSchema, setIsLoading);
   }, [currEndpoint, setEndpointSchema]);
 
-  if (!endpointSchema) return <SchemaFallaback closeModal={setIsDocsShown} />;
+  if (isLoading) return <DocsLoader />;
+  if (!endpointSchema) return <SchemaFallbackUi closeModal={setIsDocsShown} />;
 
   const content = explorer.isDocs() ? (
     <DocsRootComp types={endpointSchema.types as SchemaTypeObj[]} explorer={explorer} />
@@ -32,7 +37,7 @@ const DocsModal = ({ setIsDocsShown, explorer }: PropsType) => {
   );
 
   return (
-    <section className="relative z-20 h-[100dvh] w-[270px] cursor-auto rounded-r-[28px] bg-surface p-3 sm:w-[420px]">
+    <DocsModalLayout>
       <CloseDocsBtn
         onClick={() => {
           setIsDocsShown((prev) => !prev);
@@ -41,7 +46,7 @@ const DocsModal = ({ setIsDocsShown, explorer }: PropsType) => {
         className="absolute right-[20px] top-[20px] z-20"
       />
       {content}
-    </section>
+    </DocsModalLayout>
   );
 };
 

src/components/DocsComp/ui/SchemaFallbackUi.tsx

@@ -0,0 +1,27 @@
+import { FC, SetStateAction } from 'react';
+
+import DocsModalLayout from '@/layouts/DocsModalLayout';
+
+import CloseDocsBtn from './CloseDocsBtn';
+
+type PropsType = {
+  closeModal: (value: SetStateAction<boolean>) => void;
+};
+
+const SchemaFallbackUi: FC<PropsType> = ({ closeModal }) => {
+  return (
+    <DocsModalLayout>
+      <CloseDocsBtn
+        onClick={() => {
+          closeModal((prev) => !prev);
+        }}
+        className="absolute right-[20px] top-[20px] z-20"
+      />
+      <div className="flex h-full w-full items-center p-6">
+        <p className="w-full text-center text-on-surface">There is no schema at provided endpoint :(</p>
+      </div>
+    </DocsModalLayout>
+  );
+};
+
+export default SchemaFallbackUi;

src/components/DocsComp/ui/SuspenseFallback.tsx

@@ -0,0 +1,15 @@
+import DocsModalLayout from '@/layouts/DocsModalLayout';
+import Spinner from '@/shared/ui/Spinner';
+
+const SuspenseFallback = () => {
+  return (
+    <DocsModalLayout>
+      <div className="flex h-full w-full flex-col items-center justify-center">
+        <Spinner indeterminate />
+        <p className="mt-10 text-on-surface">Soon here will be docs section...</p>
+      </div>
+    </DocsModalLayout>
+  );
+};
+
+export default SuspenseFallback;

src/layouts/DocsModalLayout.tsx

@@ -0,0 +1,11 @@
+type PropsType = { children: JSX.Element | JSX.Element[] };
+
+const DocsModalLayout = ({ children }: PropsType) => {
+  return (
+    <section className="relative z-20 h-[100dvh] w-[270px] cursor-auto rounded-r-[28px] bg-surface p-3 sm:w-[420px]">
+      {children}
+    </section>
+  );
+};
+
+export default DocsModalLayout;

src/shared/ui/Spinner.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { createComponent } from '@lit/react';
+import { MdCircularProgress } from '@material/web/progress/circular-progress';
+
+const Spinner = createComponent({
+  react: React,
+  tagName: 'md-circular-progress',
+  elementClass: MdCircularProgress,
+});
+
+export default Spinner;

src/test/docsComponent/DocsComp.test.tsx

@@ -13,6 +13,9 @@ describe('Testing for docs component', () => {
     await act(async () => {
       fireEvent.click(showDocsBtn);
     });
+    await new Promise((resolve) => {
+      setTimeout(() => resolve('done'), 1000);
+    });
     expect(await screen.findByTestId('overlay')).toBeInTheDocument();
     expect(await screen.findByText('Docs')).toBeInTheDocument();
     expect(