feat(client): Update EntityCardSkeleton animation and add its storybook

client/src/components/list/EntityCardSkeleton.module.scss

@@ -4,44 +4,102 @@
 @import "~bootstrap/scss/maps";
 @import "~bootstrap/scss/mixins";
 
-.skeletonCardContainer {
-  width: 350px;
+.skeletonContainer {
+  background-color: white;
+  height: 100%;
+  margin: auto;
+  max-width: 350px;
+  padding-bottom: 2em;
   position: relative;
+  width: 100%;
+}
+
+.skeletonContainerBorder {
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2),
+    0 1px 8px 0 rgba(0, 0, 0, 0.12);
 }
 
-.skeletonWrapper {
+.skeletonCardImg {
+  width: 100%;
+  height: 198px;
+}
+.skeletonCardBtnContainer {
+  background-color: #f3f3f3;
+  border-radius: 40px;
+  height: 40px;
   position: absolute;
+  right: 20px;
+  top: 182px;
+  width: 120px;
+}
+.skeletonCardBtn {
+  border-radius: 40px;
+  height: 40px;
+  width: 100%;
+}
+.skeletonCardLines {
+  padding: 0 1em;
 
-  @include media-breakpoint-down(lg) {
-    position: relative;
+  div {
+    border-radius: 2px;
   }
-}
 
-.skeletonWrapper .skeletonImg .skeletonImgGraphic {
-  height: 100%;
+  > :first-child {
+    width: 60%;
+    height: 23px;
+    margin-top: 2em;
+  }
+  > :nth-child(2) {
+    width: 30%;
+    height: 18px;
+    margin-top: 1.5em;
+  }
+  > :nth-child(3) {
+    width: 80%;
+    height: 18px;
+    margin-top: 1.5em;
+  }
+  > :nth-child(4) {
+    width: 85%;
+    height: 18px;
+    margin-top: 1em;
+  }
+  > :nth-child(5) {
+    width: 50%;
+    height: 18px;
+    margin-top: 3em;
+  }
+  > :nth-child(6) {
+    width: 70%;
+    height: 18px;
+    margin-top: 1em;
+  }
 }
-.skeletonLoader:empty {
-  width: 100%;
-  position: absolute;
-  top: 0;
-  display: block;
+
+.skeletonLoading {
+  background: rgba(130, 130, 130, 0.2);
+  background: -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    color-stop(8%, rgba(130, 130, 130, 0.2)),
+    color-stop(18%, rgba(130, 130, 130, 0.3)),
+    color-stop(33%, rgba(130, 130, 130, 0.2))
+  );
   background: linear-gradient(
-      to right,
-      rgba(255, 255, 255, 0) 0,
-      rgba(255, 255, 255, 0.5) 30%,
-      rgba(255, 255, 255, 0) 60%
-    ),
-    transparent;
-  background-repeat: repeat-y;
-  background-size: 150px 200px;
-  background-position: 0 0;
-  animation: shine 3s infinite;
-}
-@keyframes shine {
-  from {
-    background-position: -100% 0;
-  }
-  to {
-    background-position: 200% 0;
+    to right,
+    rgba(130, 130, 130, 0.2) 8%,
+    rgba(130, 130, 130, 0.3) 18%,
+    rgba(130, 130, 130, 0.2) 33%
+  );
+  background-size: 2000px 100px;
+  animation: wave-lines 2s infinite ease-out;
+}
+@keyframes wave-lines {
+  0% {
+    background-position: -660px 0;
+  }
+  100% {
+    background-position: 400px 0;
   }
 }

client/src/components/list/EntityCardSkeleton.stories.tsx

@@ -0,0 +1,50 @@
+/*!
+ * Copyright 2023 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Meta, StoryObj } from "@storybook/react";
+import EntityCardSkeleton from "./EntityCardSkeleton";
+
+const componentDescription = `
+The **EntityCardSkeleton** component is a skeleton loading state
+for an entity card. It is used to provide a visual representation while
+data is being fetched or loaded asynchronously.
+
+This component is particularly useful for creating a smooth user
+experience by indicating that content is loading without displaying
+empty or placeholder cards.
+`;
+const meta: Meta = {
+  title: "components/Loaders/EntityCardSkeleton",
+  component: EntityCardSkeleton,
+
+  parameters: {
+    docs: {
+      description: {
+        component: componentDescription,
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof EntityCardSkeleton>;
+export const EntityCardSkeletonLoader: Story = {
+  args: {
+    includeBorder: true,
+  },
+};

client/src/components/list/EntityCardSkeleton.tsx

@@ -17,15 +17,34 @@
  */
 
 import cx from "classnames";
-import skeletonCardImage from "../../styles/assets/SkeletonCard.svg";
 import styles from "./EntityCardSkeleton.module.scss";
 
-export default function EntityCardSkeleton() {
+interface EntityCardSkeletonProps {
+  includeBorder?: boolean;
+}
+export default function EntityCardSkeleton({
+  includeBorder = true,
+}: EntityCardSkeletonProps) {
   return (
-    <div className={styles.skeletonWrapper}>
-      <div className={styles.skeletonImg}>
-        <img src={skeletonCardImage} alt="skeleton card" loading="lazy" />
-        <div className={cx(styles.skeletonImgGraphic, styles.skeletonLoader)} />
+    <div
+      className={cx(
+        styles.skeletonContainer,
+        includeBorder ? styles.skeletonContainerBorder : ""
+      )}
+    >
+      <div className={cx(styles.skeletonCardImg, styles.skeletonLoading)}></div>
+      <div className={cx(styles.skeletonCardBtnContainer)}>
+        <div
+          className={cx(styles.skeletonCardBtn, styles.skeletonLoading)}
+        ></div>
+      </div>
+      <div className={styles.skeletonCardLines}>
+        <div className={styles.skeletonLoading}></div>
+        <div className={styles.skeletonLoading}></div>
+        <div className={styles.skeletonLoading}></div>
+        <div className={styles.skeletonLoading}></div>
+        <div className={styles.skeletonLoading}></div>
+        <div className={styles.skeletonLoading}></div>
       </div>
     </div>
   );

client/src/components/progress/Progress.stories.tsx

@@ -20,7 +20,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import ProgressIndicator, { ProgressStyle, ProgressType } from "./Progress";
 
 const meta: Meta<typeof ProgressIndicator> = {
-  title: "components/ProgressIndicator",
+  title: "components/Loaders/ProgressIndicator",
   component: ProgressIndicator,
   argTypes: {
     title: {

client/src/components/progress/ProgressSteps.stories.tsx

@@ -21,7 +21,7 @@ import { ProgressStyle, ProgressType } from "./Progress";
 import ProgressStepsIndicator, { StepsProgressBar } from "./ProgressSteps";
 
 const meta: Meta<typeof ProgressStepsIndicator> = {
-  title: "components/ProgressIndicatorSteps",
+  title: "components/Loaders/ProgressIndicatorSteps",
   component: ProgressStepsIndicator,
   argTypes: {
     title: {