Loading states for settings, Improve Ch editor

src/components/generic/Card.tsx

@@ -1,5 +1,7 @@
 import type React from 'react';
 
+import { Loading } from '@components/generic/Loading';
+
 type DefaultDivProps = JSX.IntrinsicElements['div'];
 
 interface CardProps extends DefaultDivProps {
@@ -17,13 +19,15 @@ export const Card = ({
   children,
   className,
   lgPlaceholder,
+  loading,
   ...props
 }: CardProps): JSX.Element => {
   return (
     <div
-      className={`flex flex-col flex-auto dark:text-white border-y md:border shadow-md select-none dark:bg-primaryDark border-gray-300 dark:border-transparent md:rounded-3xl  ${className}`}
+      className={`relative flex flex-col flex-auto dark:text-white border-y md:border shadow-md select-none dark:bg-primaryDark border-gray-300 dark:border-transparent md:rounded-md  ${className}`}
       {...props}
     >
+      {loading && <Loading />}
       {(title || description) && (
         <div className="flex items-center justify-between mx-10 mt-10">
           <div className="flex flex-col">

src/components/generic/Loading.tsx

@@ -0,0 +1,9 @@
+import type React from 'react';
+
+export const Loading = (): JSX.Element => {
+  return (
+    <div className="absolute top-0 bottom-0 left-0 right-0 z-10 flex rounded-md backdrop-filter backdrop-blur-sm">
+      <div className="m-auto text-lg font-medium text-gray-400">Loading</div>
+    </div>
+  );
+};

src/components/generic/form/Select.tsx

@@ -29,8 +29,8 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         <InputWrapper>
           <select
             ref={ref}
-            className={`w-full rounded-md bg-white dark:bg-transparent focus:outline-none focus:border-primary ${
-              small ? 'm-1' : 'h-10 mx-2'
+            className={`w-full rounded-md bg-transparent focus:outline-none focus:border-primary ${
+              small ? 'p-1' : 'h-10 px-2'
             }`}
             disabled={
               props.disabled