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 ( +