refactor(console): improve org settings page

packages/console/src/ds-components/Select/index.module.scss

@@ -20,7 +20,7 @@
     justify-content: flex-start;
     flex-wrap: wrap;
     gap: _.unit(2);
-    padding: _.unit(2) _.unit(3);
+    padding: _.unit(1.5) _.unit(3);
     cursor: text;
 
     .tag {

packages/console/src/pages/Organizations/RoleModal/index.tsx

@@ -110,7 +110,7 @@ function RoleModal({ isOpen, editData, onClose }: Props) {
         </FormField>
         <FormField title="general.description">
           <TextInput
-            placeholder="organizations.create_role_placeholder"
+            placeholder={t('organizations.create_role_placeholder')}
             error={Boolean(errors.description)}
             {...register('description')}
           />

packages/console/src/pages/Organizations/TemplateTable/index.module.scss

@@ -7,3 +7,7 @@
 .table {
   margin-top: _.unit(3);
 }
+
+.spinner {
+  margin: _.unit(2) 0;
+}

packages/console/src/pages/Organizations/TemplateTable/index.tsx

@@ -4,6 +4,7 @@ import CirclePlus from '@/assets/icons/circle-plus.svg';
 import Plus from '@/assets/icons/plus.svg';
 import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
 import Button from '@/ds-components/Button';
+import { Ring as Spinner } from '@/ds-components/Spinner';
 import Table from '@/ds-components/Table';
 import { type Column } from '@/ds-components/Table/types';
 
@@ -39,40 +40,46 @@ function TemplateTable<
   isLoading,
   onPageChange,
 }: Props<TFieldValues, TName>) {
-  const hasData = data.length > 0;
+  const hasData = !isLoading && data.length > 0;
+
+  if (isLoading) {
+    <Spinner className={styles.spinner} />;
+  }
 
   return (
     <>
-      <Table
-        hasBorder
-        placeholder={<EmptyDataPlaceholder />}
-        isLoading={isLoading}
-        className={styles.table}
-        rowGroups={[
-          {
-            key: 'data',
-            data,
-          },
-        ]}
-        columns={columns}
-        rowIndexKey={rowIndexKey}
-        pagination={{
-          page,
-          totalCount,
-          pageSize,
-          onChange: onPageChange,
-        }}
-        footer={
-          <Button
-            size="small"
-            type="text"
-            className={styles.addButton}
-            icon={<CirclePlus />}
-            title="general.create_another"
-            onClick={onAdd}
-          />
-        }
-      />
+      {hasData && (
+        <Table
+          hasBorder
+          placeholder={<EmptyDataPlaceholder />}
+          isLoading={isLoading}
+          className={styles.table}
+          rowGroups={[
+            {
+              key: 'data',
+              data,
+            },
+          ]}
+          columns={columns}
+          rowIndexKey={rowIndexKey}
+          pagination={{
+            page,
+            totalCount,
+            pageSize,
+            onChange: onPageChange,
+          }}
+          footer={
+            <Button
+              size="small"
+              type="text"
+              className={styles.addButton}
+              icon={<CirclePlus />}
+              title="general.create_another"
+              onClick={onAdd}
+            />
+          }
+        />
+      )}
       {onAdd && !hasData && (
         <Button
           className={styles.addButton}