diff --git a/packages/console/src/pages/Connectors/components/CreateForm/Skeleton.module.scss b/packages/console/src/pages/Connectors/components/CreateForm/Skeleton.module.scss new file mode 100644 index 000000000..dbe6a3872 --- /dev/null +++ b/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%; + } +} diff --git a/packages/console/src/pages/Connectors/components/CreateForm/Skeleton.tsx b/packages/console/src/pages/Connectors/components/CreateForm/Skeleton.tsx new file mode 100644 index 000000000..da7b24665 --- /dev/null +++ b/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 ( +
+ {Array.from({ length: 8 }).map((_, index) => ( + // eslint-disable-next-line react/no-array-index-key +
+
+
+
+
+
+
+
+
+
+ ))} +
+ ); +} + +export default Skeleton; diff --git a/packages/console/src/pages/Connectors/components/CreateForm/index.tsx b/packages/console/src/pages/Connectors/components/CreateForm/index.tsx index de53ec95e..442553fe3 100644 --- a/packages/console/src/pages/Connectors/components/CreateForm/index.tsx +++ b/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 && } {factoriesError?.message ?? connectorsError?.message}