fix

pages/api-docs.tsx

@@ -10,7 +10,7 @@ import SwaggerUI from 'ui/apiDocs/SwaggerUI';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
-const AppsPage: NextPage = () => {
+const APIDocsPage: NextPage = () => {
   const networkTitle = getNetworkTitle();
 
   return (
@@ -22,7 +22,7 @@ const AppsPage: NextPage = () => {
   );
 };
 
-export default AppsPage;
+export default APIDocsPage;
 
 export const getServerSideProps: GetServerSideProps<Props> = async(args) => {
   if (!appConfig.apiDoc.specUrl) {

pages/graphiql.tsx

-import { Spinner } from '@chakra-ui/react';
 import type { NextPage } from 'next';
 import dynamic from 'next/dynamic';
 const GraphQL = dynamic(() => import('ui/graphQL/GraphQL'), {
-  loading: () => <Spinner/>,
+  loading: () => <ContentLoader/>,
   ssr: false,
 });
 import Head from 'next/head';
 import React from 'react';
 
+import ContentLoader from 'ui/shared/ContentLoader';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
-const AppsPage: NextPage = () => {
+const GraphiqlPage: NextPage = () => {
 
   return (
     <Page>
@@ -22,6 +22,6 @@ const AppsPage: NextPage = () => {
   );
 };
 
-export default AppsPage;
+export default GraphiqlPage;
 
 export { getServerSideProps } from 'lib/next/getServerSideProps';

ui/apiDocs/SwaggerUI.tsx

 /* eslint-disable @typescript-eslint/naming-convention */
 const SwaggerUIReact = dynamic(() => import('swagger-ui-react'), {
-  loading: () => <Spinner/>,
+  loading: () => <ContentLoader/>,
   ssr: false,
 });
 
-import { Box, Spinner, useColorModeValue } from '@chakra-ui/react';
+import { Box, useColorModeValue } from '@chakra-ui/react';
 import dynamic from 'next/dynamic';
 import React from 'react';
 
 import appConfig from 'configs/app/config';
+import ContentLoader from 'ui/shared/ContentLoader';
 
 import 'swagger-ui-react/swagger-ui.css';