refactor(console): add connector loading state (#3622)

packages/console/src/pages/Connectors/components/CreateForm/Skeleton.module.scss

@@ -0,0 +1,31 @@
+@use '@/scss/underscore' as _;
+
+.connector {
+  padding: 12px;
+  border-radius: 16px;
+  border: 1px solid var(--color-neutral-90);
+}
+
+.logo {
+  @include _.shimmering-animation;
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+}
+
+.name {
+  @include _.shimmering-animation;
+  width: 50px;
+  height: 16px;
+  margin-bottom: _.unit(1);
+}
+
+.description {
+  @include _.shimmering-animation;
+  height: 14px;
+  margin-bottom: _.unit(0.5);
+
+  &.shortDescription {
+    width: 50%;
+  }
+}

packages/console/src/pages/Connectors/components/CreateForm/Skeleton.tsx

@@ -0,0 +1,26 @@
+import classNames from 'classnames';
+
+import * as styles from './Skeleton.module.scss';
+import * as layout from './index.module.scss';
+
+function Skeleton() {
+  return (
+    <div className={layout.connectorGroup}>
+      {Array.from({ length: 8 }).map((_, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <div key={index} className={classNames(layout.connector, styles.connector)}>
+          <div className={styles.logo} />
+          <div className={layout.content}>
+            <div className={styles.name} />
+            <div>
+              <div className={styles.description} />
+              <div className={classNames(styles.description, styles.shortDescription)} />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default Skeleton;

packages/console/src/pages/Connectors/components/CreateForm/index.tsx

@@ -16,6 +16,7 @@ import * as modalStyles from '@/scss/modal.module.scss';
 import { getConnectorGroups } from '../../utils';
 
 import PlatformSelector from './PlatformSelector';
+import Skeleton from './Skeleton';
 import * as styles from './index.module.scss';
 import { getConnectorOrder } from './utils';
 
@@ -140,7 +141,7 @@ function CreateForm({ onClose, isOpen: isFormOpen, type }: Props) {
         size={modalSize}
         onClose={onClose}
       >
-        {isLoading && 'Loading...'}
+        {isLoading && <Skeleton />}
         {factoriesError?.message ?? connectorsError?.message}
         <RadioGroup
           name="group"