'skelton' -> 'skeleton'

packages/app/src/components/Sidebar/PageTree/ItemsTree.module.scss

@@ -6,13 +6,13 @@ $grw-pagetree-item-container-height: 40px;
 
 .grw-pagetree {
 
-  .grw-pagetree-item-skelton {
+  .grw-pagetree-item-skeleton {
     width: 100%;
     height: $grw-pagetree-item-container-height;
     padding: (($grw-pagetree-item-container-height - 16px) / 2) $grw-pagetree-item-padding-left;
   }
 
-  .grw-pagetree-item-skelton-children {
+  .grw-pagetree-item-skeleton-children {
     padding-left: $grw-pagetree-item-padding-left * 2;
   }
 

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

@@ -8,9 +8,9 @@ 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']}`} />
+      <Skeleton additionalClass={styles['grw-pagetree-item-skeleton']} />
+      <Skeleton additionalClass={`${styles['grw-pagetree-item-skeleton']} ${styles['grw-pagetree-item-skeleton-children']}`} />
+      <Skeleton additionalClass={`${styles['grw-pagetree-item-skeleton']} ${styles['grw-pagetree-item-skeleton-children']}`} />
     </ul>
   );
 };

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

@@ -7,7 +7,7 @@ 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']} />
+      <Skeleton additionalClass={styles['grw-sidebar-content-header-skeleton']} />
     </div>
   );
 };