diff --git a/src/components/ChannelList/ChannelListMessenger.tsx b/src/components/ChannelList/ChannelListMessenger.tsx
index 8628d9f66e..7b59daf874 100644
--- a/src/components/ChannelList/ChannelListMessenger.tsx
+++ b/src/components/ChannelList/ChannelListMessenger.tsx
@@ -42,7 +42,17 @@ export const ChannelListMessenger = (
   }
 
   if (loading) {
-    return <LoadingIndicator />;
+    return (
+      <div className='str-chat__channel-list-messenger'>
+        <div
+          aria-label={t('aria/Channel list')}
+          className='str-chat__channel-list-messenger__main'
+          role='listbox'
+        >
+          <LoadingIndicator />
+        </div>
+      </div>
+    );
   }
 
   return (
diff --git a/src/components/ChannelList/__tests__/__snapshots__/ChannelListMessenger.test.js.snap b/src/components/ChannelList/__tests__/__snapshots__/ChannelListMessenger.test.js.snap
index 55e94dac38..6afa1332a7 100644
--- a/src/components/ChannelList/__tests__/__snapshots__/ChannelListMessenger.test.js.snap
+++ b/src/components/ChannelList/__tests__/__snapshots__/ChannelListMessenger.test.js.snap
@@ -3,11 +3,11 @@
 exports[`ChannelListMessenger by default, children should be rendered 1`] = `
 <div>
   <div
-    class="str-chat__channel-list-messenger str-chat__channel-list-messenger-react"
+    class="str-chat__channel-list-messenger"
   >
     <div
       aria-label="Channel list"
-      class="str-chat__channel-list-messenger__main str-chat__channel-list-messenger-react__main"
+      class="str-chat__channel-list-messenger__main"
       role="listbox"
     >
       <div>
@@ -31,8 +31,18 @@ exports[`ChannelListMessenger when \`error\` prop is true, \`LoadingErrorIndicat
 
 exports[`ChannelListMessenger when \`loading\` prop is true, \`LoadingIndicator\` should be rendered 1`] = `
 <div>
-  <div>
-    Loading Indicator
+  <div
+    class="str-chat__channel-list-messenger"
+  >
+    <div
+      aria-label="Channel list"
+      class="str-chat__channel-list-messenger__main"
+      role="listbox"
+    >
+      <div>
+        Loading Indicator
+      </div>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/components/Loading/LoadingChannels.tsx b/src/components/Loading/LoadingChannels.tsx
index 1aae3ab268..2d24a5d5b7 100644
--- a/src/components/Loading/LoadingChannels.tsx
+++ b/src/components/Loading/LoadingChannels.tsx
@@ -1,24 +1,26 @@
 import React from 'react';
 
 const LoadingItems = () => (
-  <div className='str-chat__loading-channels-item str-chat__channel-preview-loading'>
-    <div className='str-chat__loading-channels-avatar' />
-    <div className='str-chat__loading-channels-meta str-chat__channel-preview-end-loading'>
-      <div className='str-chat__loading-channels-username' />
-      <div className='str-chat__loading-channels-status' />
+  <div className='str-chat__channel-preview-container'>
+    <div
+      aria-hidden='true'
+      className='str-chat__channel-preview str-chat__channel-preview--loading'
+    >
+      <div className='str-chat__loading-channels-avatar' />
+      <div className='str-chat__channel-preview-data str-chat__channel-preview-data--loading'>
+        <div className='str-chat__loading-channels-username' />
+        <div className='str-chat__loading-channels-status' />
+      </div>
     </div>
   </div>
 );
 
-const UnMemoizedLoadingChannels = () => (
+export const LoadingChannels = () => (
   <div className='str-chat__loading-channels'>
     <LoadingItems />
     <LoadingItems />
     <LoadingItems />
+    <LoadingItems />
+    <LoadingItems />
   </div>
 );
-
-/**
- * Loading indicator for the ChannelList
- */
-export const LoadingChannels = React.memo(UnMemoizedLoadingChannels);
diff --git a/src/components/Loading/__tests__/__snapshots__/LoadingChannels.test.js.snap b/src/components/Loading/__tests__/__snapshots__/LoadingChannels.test.js.snap
index c4c3d26c0f..41c61bf903 100644
--- a/src/components/Loading/__tests__/__snapshots__/LoadingChannels.test.js.snap
+++ b/src/components/Loading/__tests__/__snapshots__/LoadingChannels.test.js.snap
@@ -6,54 +6,113 @@ exports[`LoadingChannels should render component with default props 1`] = `
     class="str-chat__loading-channels"
   >
     <div
-      class="str-chat__loading-channels-item str-chat__channel-preview-loading"
+      class="str-chat__channel-preview-container"
     >
       <div
-        class="str-chat__loading-channels-avatar"
-      />
-      <div
-        class="str-chat__loading-channels-meta str-chat__channel-preview-end-loading"
+        aria-hidden="true"
+        class="str-chat__channel-preview str-chat__channel-preview--loading"
       >
         <div
-          class="str-chat__loading-channels-username"
+          class="str-chat__loading-channels-avatar"
         />
         <div
-          class="str-chat__loading-channels-status"
-        />
+          class="str-chat__channel-preview-data str-chat__channel-preview-data--loading"
+        >
+          <div
+            class="str-chat__loading-channels-username"
+          />
+          <div
+            class="str-chat__loading-channels-status"
+          />
+        </div>
       </div>
     </div>
     <div
-      class="str-chat__loading-channels-item str-chat__channel-preview-loading"
+      class="str-chat__channel-preview-container"
     >
       <div
-        class="str-chat__loading-channels-avatar"
-      />
-      <div
-        class="str-chat__loading-channels-meta str-chat__channel-preview-end-loading"
+        aria-hidden="true"
+        class="str-chat__channel-preview str-chat__channel-preview--loading"
       >
         <div
-          class="str-chat__loading-channels-username"
+          class="str-chat__loading-channels-avatar"
         />
         <div
-          class="str-chat__loading-channels-status"
-        />
+          class="str-chat__channel-preview-data str-chat__channel-preview-data--loading"
+        >
+          <div
+            class="str-chat__loading-channels-username"
+          />
+          <div
+            class="str-chat__loading-channels-status"
+          />
+        </div>
       </div>
     </div>
     <div
-      class="str-chat__loading-channels-item str-chat__channel-preview-loading"
+      class="str-chat__channel-preview-container"
     >
       <div
-        class="str-chat__loading-channels-avatar"
-      />
+        aria-hidden="true"
+        class="str-chat__channel-preview str-chat__channel-preview--loading"
+      >
+        <div
+          class="str-chat__loading-channels-avatar"
+        />
+        <div
+          class="str-chat__channel-preview-data str-chat__channel-preview-data--loading"
+        >
+          <div
+            class="str-chat__loading-channels-username"
+          />
+          <div
+            class="str-chat__loading-channels-status"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="str-chat__channel-preview-container"
+    >
       <div
-        class="str-chat__loading-channels-meta str-chat__channel-preview-end-loading"
+        aria-hidden="true"
+        class="str-chat__channel-preview str-chat__channel-preview--loading"
       >
         <div
-          class="str-chat__loading-channels-username"
+          class="str-chat__loading-channels-avatar"
         />
         <div
-          class="str-chat__loading-channels-status"
+          class="str-chat__channel-preview-data str-chat__channel-preview-data--loading"
+        >
+          <div
+            class="str-chat__loading-channels-username"
+          />
+          <div
+            class="str-chat__loading-channels-status"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="str-chat__channel-preview-container"
+    >
+      <div
+        aria-hidden="true"
+        class="str-chat__channel-preview str-chat__channel-preview--loading"
+      >
+        <div
+          class="str-chat__loading-channels-avatar"
         />
+        <div
+          class="str-chat__channel-preview-data str-chat__channel-preview-data--loading"
+        >
+          <div
+            class="str-chat__loading-channels-username"
+          />
+          <div
+            class="str-chat__loading-channels-status"
+          />
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/components/Loading/styling/LoadingChannels.scss b/src/components/Loading/styling/LoadingChannels.scss
new file mode 100644
index 0000000000..4ae6bf967a
--- /dev/null
+++ b/src/components/Loading/styling/LoadingChannels.scss
@@ -0,0 +1,87 @@
+@mixin channel-preview-shimmer {
+  background-color: var(--str-chat__channel-preview-loading-state-color);
+  background-image: linear-gradient(
+    90deg,
+    var(--skeleton-loading-base) 0%,
+    var(--skeleton-loading-highlight) 50%,
+    var(--skeleton-loading-base) 100%
+  );
+  background-repeat: no-repeat;
+  background-size: 200% 100%;
+  animation: loading-channels-shimmer 1.2s linear infinite;
+}
+
+.str-chat {
+  /* The color of the loading indicator while initializing the channel list */
+  --str-chat__channel-preview-loading-state-color: var(--slate-100);
+}
+
+.str-chat__loading-channels {
+  display: flex;
+  flex-direction: column;
+}
+
+.str-chat__channel-preview--loading {
+  cursor: default;
+  pointer-events: none;
+}
+
+.str-chat__channel-preview--loading,
+.str-chat__channel-preview-data--loading {
+  min-width: 0;
+}
+
+.str-chat__channel-preview-data--loading {
+  justify-content: center;
+}
+
+.str-chat__loading-channels-avatar,
+.str-chat__loading-channels-username,
+.str-chat__loading-channels-status {
+  @include channel-preview-shimmer;
+}
+
+.str-chat__loading-channels-avatar {
+  flex-shrink: 0;
+  width: calc(var(--str-chat__spacing-px) * 48);
+  height: calc(var(--str-chat__spacing-px) * 48);
+  border-radius: 50%;
+}
+
+.str-chat__loading-channels-username,
+.str-chat__loading-channels-status {
+  height: calc(var(--str-chat__spacing-px) * 20);
+  border-radius: 999px;
+  -webkit-mask-image: linear-gradient(
+    90deg,
+    #000 0%,
+    #000 94%,
+    rgba(0, 0, 0, 0.7) 98%,
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    90deg,
+    #000 0%,
+    #000 94%,
+    rgba(0, 0, 0, 0.7) 98%,
+    transparent 100%
+  );
+}
+
+.str-chat__loading-channels-username {
+  width: min(62%, calc(var(--str-chat__spacing-px) * 180));
+}
+
+.str-chat__loading-channels-status {
+  width: min(84%, calc(var(--str-chat__spacing-px) * 244));
+}
+
+@keyframes loading-channels-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+
+  to {
+    background-position: -200% 0;
+  }
+}
diff --git a/src/components/Loading/styling/index.scss b/src/components/Loading/styling/index.scss
index b21157113e..1a37d43288 100644
--- a/src/components/Loading/styling/index.scss
+++ b/src/components/Loading/styling/index.scss
@@ -1 +1,2 @@
+@use 'LoadingChannels';
 @use 'LoadingIndicator';