separated SidebarHeaderSkelton component

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

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

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

@@ -0,0 +1,14 @@
+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;