diff --git a/packages/console/src/scss/_colors.scss b/packages/console/src/scss/_colors.scss
index 9a3105d4f..d8cef3973 100644
--- a/packages/console/src/scss/_colors.scss
+++ b/packages/console/src/scss/_colors.scss
@@ -149,6 +149,7 @@
 
   // Client specific variables (not available in design system)
   --color-danger-focused: rgba(186, 27, 27, 16%); // 16% Error-40
+  --color-skeleton-shimmer-rgb: 255, 255, 255; // rgb of Layer-1
 }
 
 @mixin dark-theme {
@@ -302,4 +303,5 @@
 
   // Client specific variables (not available in design system)
   --color-danger-focused: rgba(255, 180, 169, 16%); // 16% Error-40
+  --color-skeleton-shimmer-rgb: 42, 44, 50; // rgb of Layer-1
 }
diff --git a/packages/console/src/scss/_underscore.scss b/packages/console/src/scss/_underscore.scss
index 258065668..fb781b729 100644
--- a/packages/console/src/scss/_underscore.scss
+++ b/packages/console/src/scss/_underscore.scss
@@ -30,6 +30,28 @@
   animation: rotating 1s ease-in-out infinite;
 }
 
+@mixin shimmering-animation($baseColor: var(--color-neutral-95)) {
+  background-color: $baseColor;
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    background-image:
+      linear-gradient(
+        90deg,
+        rgba(var(--color-skeleton-shimmer-rgb), 0) 0,
+        rgba(var(--color-skeleton-shimmer-rgb), 0.2) 20%,
+        rgba(var(--color-skeleton-shimmer-rgb), 0.5) 60%,
+        $baseColor
+      );
+    animation: shimmer 2s infinite;
+  }
+}
+
 @keyframes rotating {
   from {
     transform: rotate(0deg);
@@ -39,3 +61,9 @@
     transform: rotate(360deg);
   }
 }
+
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}