Fix sort of categories + improve perf

src/Components/Sidebar/Sidebar.tsx

@@ -15,19 +15,31 @@ function HandleDragStart(event: React.DragEvent<HTMLButtonElement>): void {
   event.dataTransfer.setData('type', (event.target as HTMLButtonElement).id);
 }
 
-interface CategoryWrapper {
+interface SidebarCategory {
   category: ICategory
   children: JSX.Element[]
 }
 
 export function Sidebar(props: ISidebarProps): JSX.Element {
   const rootElements: Array<JSX.Element | undefined> = [];
-  const categories = new Map<string, CategoryWrapper>(props.categories.map(category => {
-    return [category.Type, {
+  const categories = new Map<string, SidebarCategory>(props.categories.map(category => [
+    category.Type,
+    {
       category,
       children: []
-    }];
-  }));
+    }
+  ]));
+
+  // build the categories (sorted with categories first)
+  categories.forEach((categoryWrapper, categoryName) => {
+    rootElements.push(
+      <Category
+        key={categoryName}
+        category={categoryWrapper.category}
+      >
+        { categoryWrapper.children }
+      </Category>);
+  });
 
   // build the components
   props.componentOptions.forEach(componentOption => {
@@ -60,17 +72,6 @@ export function Sidebar(props: ISidebarProps): JSX.Element {
     category.children.push(componentButton);
   });
 
-  // build the categories
-  categories.forEach((categoryWrapper, categoryName) => {
-    rootElements.unshift(
-      <Category
-        key={categoryName}
-        category={categoryWrapper.category}
-      >
-        { categoryWrapper.children }
-      </Category>);
-  });
-
   const isOpenClasses = props.isOpen ? 'left-16' : '-left-64';
   return (
     <div className={`fixed z-10 bg-slate-200