'Skelton' -> 'Skeleton'

packages/app/src/components/Sidebar.tsx

@@ -17,7 +17,7 @@ import {
 import DrawerToggler from './Navbar/DrawerToggler';
 import { NavigationResizeHexagon } from './Sidebar/NavigationResizeHexagon';
 import { SidebarNav } from './Sidebar/SidebarNav';
-import { SidebarSkelton } from './Sidebar/Skelton/SidebarSkelton';
+import { SidebarSkeleton } from './Sidebar/Skeleton/SidebarSkeleton';
 import { StickyStretchableScrollerProps } from './StickyStretchableScroller';
 
 import styles from './Sidebar.module.scss';
@@ -58,9 +58,9 @@ const GlobalNavigation = () => {
 
 const SidebarContentsWrapper = () => {
   const StickyStretchableScroller = dynamic<StickyStretchableScrollerProps>(() => import('./StickyStretchableScroller')
-    .then(mod => mod.StickyStretchableScroller), { ssr: false, loading: () => <SidebarSkelton /> });
+    .then(mod => mod.StickyStretchableScroller), { ssr: false, loading: () => <SidebarSkeleton /> });
   const SidebarContents = dynamic(() => import('./Sidebar/SidebarContents')
-    .then(mod => mod.SidebarContents), { ssr: false, loading: () => <SidebarSkelton /> });
+    .then(mod => mod.SidebarContents), { ssr: false, loading: () => <SidebarSkeleton /> });
   const { mutate: mutateSidebarScroller } = useSidebarScrollerRef();
 
   const calcViewHeight = useCallback(() => {

packages/app/src/components/Sidebar/PageTree.tsx

@@ -10,7 +10,7 @@ import { useSWRxV5MigrationStatus } from '~/stores/page-listing';
 
 import ItemsTree from './PageTree/ItemsTree';
 import { PrivateLegacyPagesLink } from './PageTree/PrivateLegacyPagesLink';
-import PageTreeContentSkelton from './Skelton/PageTreeContentSkelton';
+import PageTreeContentSkeleton from './Skeleton/PageTreeContentSkeleton';
 
 const PageTreeHeader = () => {
   const { t } = useTranslation();
@@ -37,7 +37,7 @@ const PageTree: FC = memo(() => {
     return (
       <>
         <PageTreeHeader />
-        <PageTreeContentSkelton />
+        <PageTreeContentSkeleton />
       </>
     );
   }

packages/app/src/components/Sidebar/PageTree/ItemsTree.tsx

@@ -24,7 +24,7 @@ import { usePageTreeDescCountMap, useSidebarScrollerRef } from '~/stores/ui';
 import { useGlobalSocket } from '~/stores/websocket';
 import loggerFactory from '~/utils/logger';
 
-import PageTreeContentSkelton from '../Skelton/PageTreeContentSkelton';
+import PageTreeContentSkeleton from '../Skeleton/PageTreeContentSkeleton';
 
 import Item from './Item';
 import { ItemNode } from './ItemNode';
@@ -290,7 +290,7 @@ const ItemsTree = (props: ItemsTreeProps): JSX.Element => {
     );
   }
 
-  return <PageTreeContentSkelton />;
+  return <PageTreeContentSkeleton />;
 };
 
 export default ItemsTree;

packages/app/src/components/Sidebar/Skeleton/PageTreeContentSkeleton.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Skeleton } from '~/components/Skeleton';
+
+import styles from '../PageTree/ItemsTree.module.scss';
+
+const PageTreeContentSkeleton = (): JSX.Element => {
+
+  return (
+    <ul className={`grw-pagetree ${styles['grw-pagetree']} list-group p-3`} >
+      <Skeleton additionalClass={styles['grw-pagetree-item-skelton']} />
+      <Skeleton additionalClass={`${styles['grw-pagetree-item-skelton']} ${styles['grw-pagetree-item-skelton-children']}`} />
+      <Skeleton additionalClass={`${styles['grw-pagetree-item-skelton']} ${styles['grw-pagetree-item-skelton-children']}`} />
+    </ul>
+  );
+};
+
+export default PageTreeContentSkeleton;

packages/app/src/components/Sidebar/Skeleton/SidebarHeaderSkeleton.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Skeleton } from '~/components/Skeleton';
+
+import styles from './SidebarHeaderSkeleton.module.scss';
+
+const SidebarHeaderSkeleton = (): JSX.Element => {
+  return (
+    <div className="grw-sidebar-content-header p-3">
+      <Skeleton additionalClass={styles['grw-sidebar-content-header-skelton']} />
+    </div>
+  );
+};
+export default SidebarHeaderSkeleton;

packages/app/src/components/Sidebar/Skeleton/SidebarSkeleton.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { SidebarContentsType } from '~/interfaces/ui';
+import { useCurrentSidebarContents } from '~/stores/ui';
+
+// TODO: implement Skeleton of other 3 components
+
+// import CustomSidebarContentSkeleton from './CustomSidebarContentSkeleton';
+import PageTreeContentSkeleton from './PageTreeContentSkeleton';
+// import RecentChangesContentSkeleton from './RecentChangesContentSkeleton';
+// import TagContentSkeleton from './TagContentSkeleton';
+import SidebarHeaderSkeleton from './SidebarHeaderSkeleton';
+
+export const SidebarSkeleton = (): JSX.Element => {
+
+  const { data: currentSidebarContents } = useCurrentSidebarContents();
+
+  let SidebarContentSkeleton;
+  switch (currentSidebarContents) {
+
+    /*
+    case SidebarContentsType.RECENT:
+      SidebarContentSkeleton = RecentChangesContentSkeleton;
+      break;
+    case SidebarContentsType.CUSTOM:
+      SidebarContentSkeleton = CustomSidebarContentSkeleton;
+      break;
+    case SidebarContentsType.TAG:
+      SidebarContentSkeleton = TagContentSkeleton;
+      break;
+    */
+    default:
+      SidebarContentSkeleton = PageTreeContentSkeleton;
+  }
+
+  return (
+    <>
+      <SidebarHeaderSkeleton />
+      <SidebarContentSkeleton />
+    </>
+  );
+};

packages/app/src/components/Sidebar/Skelton/PageTreeContentSkelton.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-
-import { Skelton } from '~/components/Skelton';
-
-import styles from '../PageTree/ItemsTree.module.scss';
-
-const PageTreeContentSkelton = (): JSX.Element => {
-
-  return (
-    <ul className={`grw-pagetree ${styles['grw-pagetree']} list-group p-3`} >
-      <Skelton additionalClass={styles['grw-pagetree-item-skelton']} />
-      <Skelton additionalClass={`${styles['grw-pagetree-item-skelton']} ${styles['grw-pagetree-item-skelton-children']}`} />
-      <Skelton additionalClass={`${styles['grw-pagetree-item-skelton']} ${styles['grw-pagetree-item-skelton-children']}`} />
-    </ul>
-  );
-};
-
-export default PageTreeContentSkelton;

packages/app/src/components/Sidebar/Skelton/SidebarHeaderSkelton.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-import { Skelton } from '~/components/Skelton';
-
-import styles from './SidebarHeaderSkelton.module.scss';
-
-const SidebarHeaderSkelton = (): JSX.Element => {
-  return (
-    <div className="grw-sidebar-content-header p-3">
-      <Skelton additionalClass={styles['grw-sidebar-content-header-skelton']} />
-    </div>
-  );
-};
-export default SidebarHeaderSkelton;

packages/app/src/components/Sidebar/Skelton/SidebarSkelton.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-
-import { SidebarContentsType } from '~/interfaces/ui';
-import { useCurrentSidebarContents } from '~/stores/ui';
-
-// TODO: implement Skelton of other 3 components
-
-// import CustomSidebarContentSkelton from './CustomSidebarContentSkelton';
-import PageTreeContentSkelton from './PageTreeContentSkelton';
-// import RecentChangesContentSkelton from './RecentChangesContentSkelton';
-// import TagContentSkelton from './TagContentSkelton';
-import SidebarHeaderSkelton from './SidebarHeaderSkelton';
-
-export const SidebarSkelton = (): JSX.Element => {
-
-  const { data: currentSidebarContents } = useCurrentSidebarContents();
-
-  let SidebarContentSkelton;
-  switch (currentSidebarContents) {
-    /*
-    case SidebarContentsType.RECENT:
-      SidebarContentSkelton = RecentChangesContentSkelton;
-      break;
-    case SidebarContentsType.CUSTOM:
-      SidebarContentSkelton = CustomSidebarContentSkelton;
-      break;
-    case SidebarContentsType.TAG:
-      SidebarContentSkelton = TagContentSkelton;
-      break;
-    */
-    default:
-      SidebarContentSkelton = PageTreeContentSkelton;
-  }
-
-  return (
-    <>
-      <SidebarHeaderSkelton />
-      <SidebarContentSkelton />
-    </>
-  );
-};