implement PageEditorModeManager skelton

packages/app/src/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -1,7 +1,9 @@
 import React, { useState, useEffect, useCallback } from 'react';
 
+
 import { isPopulated } from '@growi/core';
 import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
 import { DropdownItem } from 'reactstrap';
 
 import { exportAsMarkdown } from '~/client/services/page-operation';
@@ -149,8 +151,18 @@ type GrowiContextualSubNavigationProps = {
   isLinkSharingDisabled: boolean,
 };
 
+const PageEditorModeManagerSkelton = () => {
+  const style = {
+    width: 208,
+    height: 32.49,
+  };
+  return <div className="skelton" style={style}></div>;
+};
+
 const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps): JSX.Element => {
 
+  const PageEditorModeManager = dynamic(() => import('./PageEditorModeManager'), { ssr: false, loading: () => <PageEditorModeManagerSkelton/> });
+
   const { data: currentPage, mutate: mutateCurrentPage } = useSWRxCurrentPage();
   const path = currentPage?.path;