From d2848b747119bc91e4c6a16b500598e555ac9d0b Mon Sep 17 00:00:00 2001
From: Oliver Lazoroski <oliver.lazoroski@gmail.com>
Date: Mon, 9 Mar 2026 13:18:00 +0100
Subject: [PATCH 1/6] feat: redesign channel list loading skeletons

---
 src/components/Loading/LoadingChannels.tsx    |  13 +-
 .../LoadingChannels.test.js.snap              |  46 +++++++-
 .../Loading/styling/LoadingChannels.scss      | 111 ++++++++++++++++++
 src/components/Loading/styling/index.scss     |   1 +
 4 files changed, 157 insertions(+), 14 deletions(-)
 create mode 100644 src/components/Loading/styling/LoadingChannels.scss

diff --git a/src/components/Loading/LoadingChannels.tsx b/src/components/Loading/LoadingChannels.tsx
index 1aae3ab268..603fa3441f 100644
--- a/src/components/Loading/LoadingChannels.tsx
+++ b/src/components/Loading/LoadingChannels.tsx
@@ -1,24 +1,21 @@
 import React from 'react';
 
 const LoadingItems = () => (
-  <div className='str-chat__loading-channels-item str-chat__channel-preview-loading'>
+  <div className='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__channel-preview-end-loading'>
       <div className='str-chat__loading-channels-username' />
       <div className='str-chat__loading-channels-status' />
     </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..29795f61ca 100644
--- a/src/components/Loading/__tests__/__snapshots__/LoadingChannels.test.js.snap
+++ b/src/components/Loading/__tests__/__snapshots__/LoadingChannels.test.js.snap
@@ -6,13 +6,13 @@ 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-loading"
     >
       <div
         class="str-chat__loading-channels-avatar"
       />
       <div
-        class="str-chat__loading-channels-meta str-chat__channel-preview-end-loading"
+        class="str-chat__channel-preview-end-loading"
       >
         <div
           class="str-chat__loading-channels-username"
@@ -23,13 +23,13 @@ exports[`LoadingChannels should render component with default props 1`] = `
       </div>
     </div>
     <div
-      class="str-chat__loading-channels-item str-chat__channel-preview-loading"
+      class="str-chat__channel-preview-loading"
     >
       <div
         class="str-chat__loading-channels-avatar"
       />
       <div
-        class="str-chat__loading-channels-meta str-chat__channel-preview-end-loading"
+        class="str-chat__channel-preview-end-loading"
       >
         <div
           class="str-chat__loading-channels-username"
@@ -40,13 +40,47 @@ exports[`LoadingChannels should render component with default props 1`] = `
       </div>
     </div>
     <div
-      class="str-chat__loading-channels-item str-chat__channel-preview-loading"
+      class="str-chat__channel-preview-loading"
     >
       <div
         class="str-chat__loading-channels-avatar"
       />
       <div
-        class="str-chat__loading-channels-meta str-chat__channel-preview-end-loading"
+        class="str-chat__channel-preview-end-loading"
+      >
+        <div
+          class="str-chat__loading-channels-username"
+        />
+        <div
+          class="str-chat__loading-channels-status"
+        />
+      </div>
+    </div>
+    <div
+      class="str-chat__channel-preview-loading"
+    >
+      <div
+        class="str-chat__loading-channels-avatar"
+      />
+      <div
+        class="str-chat__channel-preview-end-loading"
+      >
+        <div
+          class="str-chat__loading-channels-username"
+        />
+        <div
+          class="str-chat__loading-channels-status"
+        />
+      </div>
+    </div>
+    <div
+      class="str-chat__channel-preview-loading"
+    >
+      <div
+        class="str-chat__loading-channels-avatar"
+      />
+      <div
+        class="str-chat__channel-preview-end-loading"
       >
         <div
           class="str-chat__loading-channels-username"
diff --git a/src/components/Loading/styling/LoadingChannels.scss b/src/components/Loading/styling/LoadingChannels.scss
new file mode 100644
index 0000000000..9bb2100d0d
--- /dev/null
+++ b/src/components/Loading/styling/LoadingChannels.scss
@@ -0,0 +1,111 @@
+@mixin channel-preview-layout {
+  display: flex;
+  column-gap: var(--spacing-md);
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  min-height: calc(var(--str-chat__spacing-px) * 72);
+  padding: var(--spacing-sm);
+  margin: 0;
+  box-sizing: border-box;
+  text-align: start;
+}
+
+@mixin channel-preview-end-layout {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  row-gap: var(--spacing-xxs);
+  flex: 1;
+  min-width: 0;
+}
+
+@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__channel-preview-loading {
+  .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-avatar,
+  .str-chat__loading-channels-username,
+  .str-chat__loading-channels-status {
+    @include channel-preview-shimmer;
+  }
+
+  .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 {
+  display: flex;
+  flex-direction: column;
+  background: var(--background-elevation-elevation-1);
+  border-top: 1px solid var(--border-core-subtle);
+
+  .str-chat__channel-preview-loading:not(:last-child) {
+    border-bottom: 1px solid var(--border-core-subtle);
+  }
+}
+
+@keyframes loading-channels-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+
+  to {
+    background-position: -200% 0;
+  }
+}
+
+.str-chat__channel-preview-loading {
+  @include channel-preview-layout;
+
+  .str-chat__channel-preview-end-loading {
+    @include channel-preview-end-layout;
+  }
+
+  .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));
+  }
+}
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';

From ddea05fb9b99d40924ea63c93af42b126bdafa6a Mon Sep 17 00:00:00 2001
From: Oliver Lazoroski <oliver.lazoroski@gmail.com>
Date: Mon, 9 Mar 2026 13:32:03 +0100
Subject: [PATCH 2/6] fix: reduce channel list loading layout shift

---
 .../ChannelList/ChannelListMessenger.tsx      |  12 +-
 .../ChannelListMessenger.test.js.snap         |  18 ++-
 src/components/Loading/LoadingChannels.tsx    |  15 +-
 .../LoadingChannels.test.js.snap              | 105 ++++++++------
 .../Loading/styling/LoadingChannels.scss      | 130 +++++++-----------
 5 files changed, 153 insertions(+), 127 deletions(-)

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 603fa3441f..2d24a5d5b7 100644
--- a/src/components/Loading/LoadingChannels.tsx
+++ b/src/components/Loading/LoadingChannels.tsx
@@ -1,11 +1,16 @@
 import React from 'react';
 
 const LoadingItems = () => (
-  <div className='str-chat__channel-preview-loading'>
-    <div className='str-chat__loading-channels-avatar' />
-    <div className='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>
 );
diff --git a/src/components/Loading/__tests__/__snapshots__/LoadingChannels.test.js.snap b/src/components/Loading/__tests__/__snapshots__/LoadingChannels.test.js.snap
index 29795f61ca..41c61bf903 100644
--- a/src/components/Loading/__tests__/__snapshots__/LoadingChannels.test.js.snap
+++ b/src/components/Loading/__tests__/__snapshots__/LoadingChannels.test.js.snap
@@ -6,88 +6,113 @@ exports[`LoadingChannels should render component with default props 1`] = `
     class="str-chat__loading-channels"
   >
     <div
-      class="str-chat__channel-preview-loading"
+      class="str-chat__channel-preview-container"
     >
       <div
-        class="str-chat__loading-channels-avatar"
-      />
-      <div
-        class="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-loading"
+      class="str-chat__channel-preview-container"
     >
       <div
-        class="str-chat__loading-channels-avatar"
-      />
-      <div
-        class="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-loading"
+      class="str-chat__channel-preview-container"
     >
       <div
-        class="str-chat__loading-channels-avatar"
-      />
-      <div
-        class="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-loading"
+      class="str-chat__channel-preview-container"
     >
       <div
-        class="str-chat__loading-channels-avatar"
-      />
-      <div
-        class="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-loading"
+      class="str-chat__channel-preview-container"
     >
       <div
-        class="str-chat__loading-channels-avatar"
-      />
-      <div
-        class="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>
diff --git a/src/components/Loading/styling/LoadingChannels.scss b/src/components/Loading/styling/LoadingChannels.scss
index 9bb2100d0d..4ae6bf967a 100644
--- a/src/components/Loading/styling/LoadingChannels.scss
+++ b/src/components/Loading/styling/LoadingChannels.scss
@@ -1,25 +1,3 @@
-@mixin channel-preview-layout {
-  display: flex;
-  column-gap: var(--spacing-md);
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  min-height: calc(var(--str-chat__spacing-px) * 72);
-  padding: var(--spacing-sm);
-  margin: 0;
-  box-sizing: border-box;
-  text-align: start;
-}
-
-@mixin channel-preview-end-layout {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  row-gap: var(--spacing-xxs);
-  flex: 1;
-  min-width: 0;
-}
-
 @mixin channel-preview-shimmer {
   background-color: var(--str-chat__channel-preview-loading-state-color);
   background-image: linear-gradient(
@@ -38,74 +16,72 @@
   --str-chat__channel-preview-loading-state-color: var(--slate-100);
 }
 
-.str-chat__channel-preview-loading {
-  .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 {
+  display: flex;
+  flex-direction: column;
+}
 
-  .str-chat__loading-channels-avatar,
-  .str-chat__loading-channels-username,
-  .str-chat__loading-channels-status {
-    @include channel-preview-shimmer;
-  }
+.str-chat__channel-preview--loading {
+  cursor: default;
+  pointer-events: none;
+}
 
-  .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__channel-preview--loading,
+.str-chat__channel-preview-data--loading {
+  min-width: 0;
 }
 
-.str-chat__loading-channels {
-  display: flex;
-  flex-direction: column;
-  background: var(--background-elevation-elevation-1);
-  border-top: 1px solid var(--border-core-subtle);
+.str-chat__channel-preview-data--loading {
+  justify-content: center;
+}
 
-  .str-chat__channel-preview-loading:not(:last-child) {
-    border-bottom: 1px solid var(--border-core-subtle);
-  }
+.str-chat__loading-channels-avatar,
+.str-chat__loading-channels-username,
+.str-chat__loading-channels-status {
+  @include channel-preview-shimmer;
 }
 
-@keyframes loading-channels-shimmer {
-  from {
-    background-position: 200% 0;
-  }
+.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%;
+}
 
-  to {
-    background-position: -200% 0;
-  }
+.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__channel-preview-loading {
-  @include channel-preview-layout;
+.str-chat__loading-channels-username {
+  width: min(62%, calc(var(--str-chat__spacing-px) * 180));
+}
 
-  .str-chat__channel-preview-end-loading {
-    @include channel-preview-end-layout;
-  }
+.str-chat__loading-channels-status {
+  width: min(84%, calc(var(--str-chat__spacing-px) * 244));
+}
 
-  .str-chat__loading-channels-username {
-    width: min(62%, calc(var(--str-chat__spacing-px) * 180));
+@keyframes loading-channels-shimmer {
+  from {
+    background-position: 200% 0;
   }
 
-  .str-chat__loading-channels-status {
-    width: min(84%, calc(var(--str-chat__spacing-px) * 244));
+  to {
+    background-position: -200% 0;
   }
 }

From 1ec88b68c8ae7078f4ece482e904db43810a1d41 Mon Sep 17 00:00:00 2001
From: Oliver Lazoroski <oliver.lazoroski@gmail.com>
Date: Mon, 9 Mar 2026 15:11:01 +0100
Subject: [PATCH 3/6] feat: redesign the LoadingChannel component

---
 src/components/Channel/styling/Channel.scss   | 234 ++++++++++++------
 src/components/Loading/LoadingChannel.tsx     |  54 ++--
 .../Loading/__tests__/LoadingChannel.test.js  |  15 ++
 .../__snapshots__/LoadingChannel.test.js.snap | 119 +++++++++
 4 files changed, 322 insertions(+), 100 deletions(-)
 create mode 100644 src/components/Loading/__tests__/LoadingChannel.test.js
 create mode 100644 src/components/Loading/__tests__/__snapshots__/LoadingChannel.test.js.snap

diff --git a/src/components/Channel/styling/Channel.scss b/src/components/Channel/styling/Channel.scss
index 64012597d4..4f72e3c157 100644
--- a/src/components/Channel/styling/Channel.scss
+++ b/src/components/Channel/styling/Channel.scss
@@ -43,110 +43,144 @@
 }
 
 .str-chat__loading-channel {
-  $text-height: calc(var(--str-chat__spacing-px) * 16);
+  $text-height: calc(var(--str-chat__spacing-px) * 20);
   height: 100%;
   display: flex;
   flex-direction: column;
 
-  .str-chat__loading-channel-header {
-    @include utils.header-layout;
+  .str-chat__channel-header--loading {
+    pointer-events: none;
+
+    .str-chat__channel-header__data--loading {
+      align-items: center;
+    }
+
+    .str-chat__loading-channel-header-name {
+      height: $text-height;
+      width: calc(var(--str-chat__spacing-px) * 112);
+    }
 
     .str-chat__loading-channel-header-avatar {
       flex-shrink: 0;
       width: calc(var(--str-chat__spacing-px) * 40);
       height: calc(var(--str-chat__spacing-px) * 40);
-      border-radius: var(--str-chat__avatar-border-radius);
+      border-radius: 50%;
     }
+  }
 
-    .str-chat__loading-channel-header-end {
-      @include utils.header-text-layout;
-
-      .str-chat__loading-channel-header-name {
-        border-radius: var(--str-chat__border-radius-xs);
-        height: $text-height;
-        width: calc(var(--str-chat__spacing-px) * 170);
-      }
+  .str-chat__message-list--loading {
+    overflow: hidden;
 
-      .str-chat__loading-channel-header-info {
-        border-radius: var(--str-chat__border-radius-xs);
-        height: $text-height;
-        width: calc(var(--str-chat__spacing-px) * 66);
-      }
+    .str-chat__message-list-scroll {
+      width: 100%;
+      height: 100%;
     }
   }
 
   .str-chat__loading-channel-message-list {
-    /* stylelint-disable */
     height: 100%;
-    @include utils.message-list-spacing;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding-block: var(--spacing-lg) var(--spacing-md);
 
     .str-chat__loading-channel-message {
       display: flex;
       width: 100%;
-      column-gap: var(--str-chat__spacing-2);
-      padding: var(--str-chat__spacing-4) 0;
+      column-gap: var(--spacing-sm);
+      padding-block: var(--spacing-xs);
 
       .str-chat__loading-channel-message-avatar {
         flex-shrink: 0;
-        width: calc(var(--str-chat__spacing-px) * 49);
-        height: calc(var(--str-chat__spacing-px) * 49);
+        width: calc(var(--str-chat__spacing-px) * 32);
+        height: calc(var(--str-chat__spacing-px) * 32);
+        border-radius: 50%;
+        align-self: end;
       }
 
-      .str-chat__loading-channel-message-end {
+      .str-chat__loading-channel-message-content {
         display: flex;
         flex-direction: column;
-        width: 100%;
-        row-gap: var(--str-chat__spacing-2);
+        width: min(100%, var(--str-chat__message-max-width));
+        max-width: var(--str-chat__message-max-width);
+        row-gap: var(--spacing-xxs);
+        min-width: 0;
+      }
 
-        .str-chat__loading-channel-message-last-row {
-          display: flex;
-          width: 100%;
-          column-gap: var(--str-chat__spacing-2);
-        }
+      .str-chat__loading-channel-message-bubble {
+        min-height: calc(var(--str-chat__spacing-px) * 52);
+        width: min(100%, var(--str-chat__message-max-width));
+        border-radius: var(--message-bubble-radius-group-bottom);
       }
 
-      .str-chat__loading-channel-message-sender {
-        height: $text-height;
-        width: calc(var(--str-chat__spacing-px) * 66);
+      .str-chat__loading-channel-message-bubble--sm {
+        width: min(54%, calc(var(--str-chat__spacing-px) * 216));
       }
 
-      .str-chat__loading-channel-message-text {
-        height: $text-height;
-        width: 100%;
+      .str-chat__loading-channel-message-bubble--md {
+        width: min(68%, calc(var(--str-chat__spacing-px) * 272));
+      }
+
+      .str-chat__loading-channel-message-bubble--lg {
+        width: min(82%, calc(var(--str-chat__spacing-px) * 328));
+      }
+
+      .str-chat__loading-channel-message-metadata {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-xs);
+        min-width: 0;
+      }
+
+      .str-chat__loading-channel-message-sender {
+        height: calc(var(--str-chat__spacing-px) * 14);
+        width: calc(var(--str-chat__spacing-px) * 72);
       }
 
       .str-chat__loading-channel-message-date {
-        height: $text-height;
-        width: calc(var(--str-chat__spacing-px) * 50);
+        height: calc(var(--str-chat__spacing-px) * 14);
+        width: calc(var(--str-chat__spacing-px) * 48);
       }
 
-      &:nth-of-type(2) {
-        flex-direction: row-reverse;
+      &.str-chat__loading-channel-message--outgoing {
+        justify-content: flex-end;
 
-        .str-chat__loading-channel-message-sender {
-          align-self: end;
+        .str-chat__loading-channel-message-content {
+          align-items: flex-end;
         }
 
-        .str-chat__loading-channel-message-last-row {
-          flex-direction: row-reverse;
+        .str-chat__loading-channel-message-bubble {
+          border-end-end-radius: var(--message-bubble-radius-tail);
+        }
+
+        .str-chat__loading-channel-message-metadata {
+          justify-content: flex-end;
+        }
+      }
+
+      &.str-chat__loading-channel-message--incoming {
+        .str-chat__loading-channel-message-bubble {
+          border-end-start-radius: var(--message-bubble-radius-tail);
         }
       }
     }
   }
 
-  .str-chat__loading-channel-message-input-row {
-    display: flex;
-    column-gap: var(--str-chat__spacing-2);
-    padding: var(--str-chat__spacing-2);
+  .str-chat__message-composer-container--loading {
+    pointer-events: none;
 
-    .str-chat__loading-channel-message-input {
-      width: 100%;
-      height: calc(var(--str-chat__spacing-px) * 36);
+    .str-chat__loading-channel-message-input-button {
+      flex-shrink: 0;
+      width: var(--button-visual-height-md);
+      height: var(--button-visual-height-md);
+      border-radius: var(--button-radius-full);
     }
 
-    .str-chat__loading-channel-message-send {
-      height: calc(var(--str-chat__spacing-px) * 36);
-      width: calc(var(--str-chat__spacing-px) * 36);
+    .str-chat__loading-channel-message-input-pill {
+      flex: 1;
+      min-width: 0;
+      height: var(--button-visual-height-md);
+      border-radius: var(--str-chat__message-input-border-radius);
     }
   }
 }
@@ -180,59 +214,95 @@
   --str-chat__channel-empty-indicator-color: var(--str-chat__disabled-color);
 
   /* The color of the loading indicator */
-  --str-chat__channel-loading-state-color: var(--str-chat__disabled-color);
+  --str-chat__channel-loading-state-color: var(--slate-100);
 }
 
 .str-chat__channel {
   @include utils.component-layer-overrides('channel');
 }
 
-.str-chat__loading-channel {
-  @include utils.loading-animation;
+@mixin channel-loading-shimmer {
+  background-color: var(--str-chat__channel-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-channel-shimmer 1.2s linear infinite;
+}
 
-  .str-chat__loading-channel-header {
-    background-color: var(--str-chat__channel-header-background-color);
+@mixin channel-loading-faded-bar {
+  @include channel-loading-shimmer;
+  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-channel {
+  .str-chat__channel-header--loading {
     .str-chat__loading-channel-header-avatar {
-      @include utils.loading-item-background('channel');
-      border-radius: var(--str-chat__avatar-border-radius);
+      @include channel-loading-shimmer;
+      border-radius: 50%;
     }
 
-    .str-chat__loading-channel-header-name,
-    .str-chat__loading-channel-header-info {
-      @include utils.loading-item-background('channel');
-      border-radius: var(--str-chat__border-radius-xs);
+    .str-chat__loading-channel-header-name {
+      @include channel-loading-faded-bar;
     }
   }
 
-  .str-chat__loading-channel-message-list {
-    background-color: var(--str-chat__message-list-background-color);
-
+  .str-chat__message-list--loading {
     .str-chat__loading-channel-message-avatar {
-      @include utils.loading-item-background('channel');
-      border-radius: var(--str-chat__avatar-border-radius);
+      @include channel-loading-shimmer;
+      border-radius: 50%;
+    }
+
+    .str-chat__loading-channel-message-bubble {
+      @include channel-loading-shimmer;
     }
 
     .str-chat__loading-channel-message-sender,
-    .str-chat__loading-channel-message-text,
     .str-chat__loading-channel-message-date {
-      @include utils.loading-item-background('channel');
-      border-radius: var(--str-chat__message-bubble-border-radius);
+      @include channel-loading-faded-bar;
     }
   }
 
-  .str-chat__loading-channel-message-input-row {
-    .str-chat__loading-channel-message-input,
-    .str-chat__loading-channel-message-send {
-      @include utils.loading-item-background('channel');
+  .str-chat__message-composer-container--loading {
+    .str-chat__loading-channel-message-input-button,
+    .str-chat__loading-channel-message-input-pill {
+      @include channel-loading-shimmer;
     }
 
-    .str-chat__loading-channel-message-input {
-      border-radius: var(--str-chat__message-textarea-border-radius);
+    .str-chat__loading-channel-message-input-button {
+      border-radius: var(--button-radius-full);
     }
 
-    .str-chat__loading-channel-message-send {
-      border-radius: var(--str-chat__message-send-border-radius);
+    .str-chat__loading-channel-message-input-pill {
+      border-radius: var(--str-chat__message-input-border-radius);
     }
   }
 }
+
+@keyframes loading-channel-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+
+  to {
+    background-position: -200% 0;
+  }
+}
diff --git a/src/components/Loading/LoadingChannel.tsx b/src/components/Loading/LoadingChannel.tsx
index cce5d704fb..4bdf6b8f8d 100644
--- a/src/components/Loading/LoadingChannel.tsx
+++ b/src/components/Loading/LoadingChannel.tsx
@@ -1,12 +1,25 @@
 import React from 'react';
 
-const LoadingMessage = () => (
-  <div className='str-chat__loading-channel-message'>
-    <div className='str-chat__loading-channel-message-avatar'></div>
-    <div className='str-chat__loading-channel-message-end'>
-      <div className='str-chat__loading-channel-message-sender'></div>
-      <div className='str-chat__loading-channel-message-last-row'>
-        <div className='str-chat__loading-channel-message-text'></div>
+type LoadingMessageProps = {
+  bubbleSize: 'sm' | 'md' | 'lg';
+  outgoing?: boolean;
+};
+
+const LoadingMessage = ({ bubbleSize, outgoing = false }: LoadingMessageProps) => (
+  <div
+    className={`str-chat__loading-channel-message ${
+      outgoing
+        ? 'str-chat__loading-channel-message--outgoing'
+        : 'str-chat__loading-channel-message--incoming'
+    }`}
+  >
+    {!outgoing ? <div className='str-chat__loading-channel-message-avatar' /> : null}
+    <div className='str-chat__loading-channel-message-content'>
+      <div
+        className={`str-chat__loading-channel-message-bubble str-chat__loading-channel-message-bubble--${bubbleSize}`}
+      ></div>
+      <div className='str-chat__loading-channel-message-metadata'>
+        <div className='str-chat__loading-channel-message-sender'></div>
         <div className='str-chat__loading-channel-message-date'></div>
       </div>
     </div>
@@ -14,29 +27,34 @@ const LoadingMessage = () => (
 );
 
 const LoadingMessageInput = () => (
-  <div className='str-chat__loading-channel-message-input-row'>
-    <div className='str-chat__loading-channel-message-input'></div>
-    <div className='str-chat__loading-channel-message-send'></div>
+  <div className='str-chat__message-composer-container str-chat__message-composer-container--loading'>
+    <div className='str-chat__message-composer'>
+      <div className='str-chat__loading-channel-message-input-button'></div>
+      <div className='str-chat__loading-channel-message-input-pill'></div>
+    </div>
   </div>
 );
 
 const LoadingChannelHeader = () => (
-  <div className='str-chat__loading-channel-header'>
-    <div className='str-chat__loading-channel-header-avatar'></div>
-    <div className='str-chat__loading-channel-header-end'>
+  <div className='str-chat__channel-header str-chat__channel-header--loading'>
+    <div className='str-chat__channel-header__data str-chat__channel-header__data--loading'>
       <div className='str-chat__loading-channel-header-name'></div>
-      <div className='str-chat__loading-channel-header-info'></div>
     </div>
+    <div className='str-chat__loading-channel-header-avatar'></div>
   </div>
 );
 
 export const LoadingChannel = () => (
   <div className='str-chat__loading-channel'>
     <LoadingChannelHeader />
-    <div className='str-chat__loading-channel-message-list'>
-      {Array.from(Array(3)).map((_, i) => (
-        <LoadingMessage key={`loading-message-${i}`} />
-      ))}
+    <div className='str-chat__message-list str-chat__message-list--loading'>
+      <div className='str-chat__message-list-scroll'>
+        <div className='str-chat__loading-channel-message-list'>
+          <LoadingMessage bubbleSize='lg' />
+          <LoadingMessage bubbleSize='sm' outgoing />
+          <LoadingMessage bubbleSize='md' />
+        </div>
+      </div>
     </div>
     <LoadingMessageInput />
   </div>
diff --git a/src/components/Loading/__tests__/LoadingChannel.test.js b/src/components/Loading/__tests__/LoadingChannel.test.js
new file mode 100644
index 0000000000..750272c3ad
--- /dev/null
+++ b/src/components/Loading/__tests__/LoadingChannel.test.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { cleanup, render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { LoadingChannel } from '../LoadingChannel';
+
+afterEach(cleanup);
+
+describe('LoadingChannel', () => {
+  it('should render component with default props', () => {
+    const { container } = render(<LoadingChannel />);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/Loading/__tests__/__snapshots__/LoadingChannel.test.js.snap b/src/components/Loading/__tests__/__snapshots__/LoadingChannel.test.js.snap
new file mode 100644
index 0000000000..492168960c
--- /dev/null
+++ b/src/components/Loading/__tests__/__snapshots__/LoadingChannel.test.js.snap
@@ -0,0 +1,119 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LoadingChannel should render component with default props 1`] = `
+<div>
+  <div
+    class="str-chat__loading-channel"
+  >
+    <div
+      class="str-chat__channel-header str-chat__channel-header--loading"
+    >
+      <div
+        class="str-chat__channel-header__data str-chat__channel-header__data--loading"
+      >
+        <div
+          class="str-chat__loading-channel-header-name"
+        />
+      </div>
+      <div
+        class="str-chat__loading-channel-header-avatar"
+      />
+    </div>
+    <div
+      class="str-chat__message-list str-chat__message-list--loading"
+    >
+      <div
+        class="str-chat__message-list-scroll"
+      >
+        <div
+          class="str-chat__loading-channel-message-list"
+        >
+          <div
+            class="str-chat__loading-channel-message str-chat__loading-channel-message--incoming"
+          >
+            <div
+              class="str-chat__loading-channel-message-avatar"
+            />
+            <div
+              class="str-chat__loading-channel-message-content"
+            >
+              <div
+                class="str-chat__loading-channel-message-bubble str-chat__loading-channel-message-bubble--lg"
+              />
+              <div
+                class="str-chat__loading-channel-message-metadata"
+              >
+                <div
+                  class="str-chat__loading-channel-message-sender"
+                />
+                <div
+                  class="str-chat__loading-channel-message-date"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="str-chat__loading-channel-message str-chat__loading-channel-message--outgoing"
+          >
+            <div
+              class="str-chat__loading-channel-message-content"
+            >
+              <div
+                class="str-chat__loading-channel-message-bubble str-chat__loading-channel-message-bubble--sm"
+              />
+              <div
+                class="str-chat__loading-channel-message-metadata"
+              >
+                <div
+                  class="str-chat__loading-channel-message-sender"
+                />
+                <div
+                  class="str-chat__loading-channel-message-date"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="str-chat__loading-channel-message str-chat__loading-channel-message--incoming"
+          >
+            <div
+              class="str-chat__loading-channel-message-avatar"
+            />
+            <div
+              class="str-chat__loading-channel-message-content"
+            >
+              <div
+                class="str-chat__loading-channel-message-bubble str-chat__loading-channel-message-bubble--md"
+              />
+              <div
+                class="str-chat__loading-channel-message-metadata"
+              >
+                <div
+                  class="str-chat__loading-channel-message-sender"
+                />
+                <div
+                  class="str-chat__loading-channel-message-date"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="str-chat__message-composer-container str-chat__message-composer-container--loading"
+    >
+      <div
+        class="str-chat__message-composer"
+      >
+        <div
+          class="str-chat__loading-channel-message-input-button"
+        />
+        <div
+          class="str-chat__loading-channel-message-input-pill"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;

From 1342dc2275b8033b51f2b2897879d411ab315098 Mon Sep 17 00:00:00 2001
From: Oliver Lazoroski <oliver.lazoroski@gmail.com>
Date: Mon, 9 Mar 2026 15:48:12 +0100
Subject: [PATCH 4/6] feat: reuse channel list loading skeletons for thread
 list

---
 .../Threads/ThreadList/ThreadList.tsx         | 23 ++++-
 .../ThreadList/__tests__/ThreadList.test.js   | 86 +++++++++++++++++++
 2 files changed, 107 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Threads/ThreadList/__tests__/ThreadList.test.js

diff --git a/src/components/Threads/ThreadList/ThreadList.tsx b/src/components/Threads/ThreadList/ThreadList.tsx
index 422d11754a..4bcf4eec80 100644
--- a/src/components/Threads/ThreadList/ThreadList.tsx
+++ b/src/components/Threads/ThreadList/ThreadList.tsx
@@ -9,11 +9,15 @@ import { ThreadListItem as DefaultThreadListItem } from './ThreadListItem';
 import { ThreadListEmptyPlaceholder as DefaultThreadListEmptyPlaceholder } from './ThreadListEmptyPlaceholder';
 import { ThreadListUnseenThreadsBanner as DefaultThreadListUnseenThreadsBanner } from './ThreadListUnseenThreadsBanner';
 import { ThreadListLoadingIndicator as DefaultThreadListLoadingIndicator } from './ThreadListLoadingIndicator';
+import { LoadingChannels } from '../../Loading';
 import { useChatContext, useComponentContext } from '../../../context';
 import { useStateStore } from '../../../store';
 import { ThreadListHeader } from './ThreadListHeader';
 
-const selector = (nextValue: ThreadManagerState) => ({ threads: nextValue.threads });
+const selector = (nextValue: ThreadManagerState) => ({
+  isLoading: nextValue.pagination.isLoading,
+  threads: nextValue.threads,
+});
 
 const computeItemKey: ComputeItemKey<Thread, unknown> = (_, item) => item.id;
 
@@ -52,10 +56,25 @@ export const ThreadList = ({ virtuosoProps }: ThreadListProps) => {
     ThreadListLoadingIndicator = DefaultThreadListLoadingIndicator,
     ThreadListUnseenThreadsBanner = DefaultThreadListUnseenThreadsBanner,
   } = useComponentContext();
-  const { threads } = useStateStore(client.threads.state, selector);
+  const { isLoading, threads } = useStateStore(client.threads.state, selector);
 
   useThreadList();
 
+  if (isLoading && !threads.length) {
+    return (
+      <div
+        className={clsx('str-chat__thread-list-container', {
+          'str-chat__thread-list-container--open': navOpen,
+        })}
+      >
+        <ThreadListHeader />
+        <div className='str-chat__thread-list str-chat__thread-list--loading'>
+          <LoadingChannels />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div
       className={clsx('str-chat__thread-list-container', {
diff --git a/src/components/Threads/ThreadList/__tests__/ThreadList.test.js b/src/components/Threads/ThreadList/__tests__/ThreadList.test.js
new file mode 100644
index 0000000000..1b3c1f2e44
--- /dev/null
+++ b/src/components/Threads/ThreadList/__tests__/ThreadList.test.js
@@ -0,0 +1,86 @@
+import React from 'react';
+
+import { cleanup, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { ThreadList } from '../ThreadList';
+
+const mockUseChatContext = jest.fn();
+const mockUseComponentContext = jest.fn();
+const mockUseStateStore = jest.fn();
+const mockVirtuoso = jest.fn();
+
+jest.mock('react-virtuoso', () => ({
+  Virtuoso: (props) => {
+    mockVirtuoso(props);
+    return <div data-testid='virtuoso' />;
+  },
+}));
+
+jest.mock('../../../../context', () => ({
+  useChatContext: () => mockUseChatContext(),
+  useComponentContext: () => mockUseComponentContext(),
+}));
+
+jest.mock('../../../../store', () => ({
+  useStateStore: (...args) => mockUseStateStore(...args),
+}));
+
+jest.mock('../../../Loading', () => ({
+  LoadingChannels: () => <div data-testid='loading-channels' />,
+}));
+
+jest.mock('../ThreadListHeader', () => ({
+  ThreadListHeader: () => <div data-testid='thread-list-header' />,
+}));
+
+jest.mock('../ThreadListUnseenThreadsBanner', () => ({
+  ThreadListUnseenThreadsBanner: () => <div data-testid='thread-list-unseen-banner' />,
+}));
+
+describe('ThreadList', () => {
+  const mockClient = {
+    threads: {
+      activate: jest.fn(),
+      deactivate: jest.fn(),
+      loadNextPage: jest.fn(),
+      state: {},
+    },
+  };
+
+  beforeEach(() => {
+    mockUseChatContext.mockReturnValue({ client: mockClient, navOpen: true });
+    mockUseComponentContext.mockReturnValue({});
+    mockUseStateStore.mockReturnValue({ isLoading: false, threads: [] });
+  });
+
+  afterEach(() => {
+    cleanup();
+    jest.clearAllMocks();
+  });
+
+  it('renders channel-list skeletons during the initial thread list load', () => {
+    mockUseStateStore.mockReturnValue({ isLoading: true, threads: [] });
+
+    render(<ThreadList />);
+
+    expect(screen.getByTestId('thread-list-header')).toBeInTheDocument();
+    expect(screen.getByTestId('loading-channels')).toBeInTheDocument();
+    expect(screen.queryByTestId('thread-list-unseen-banner')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('virtuoso')).not.toBeInTheDocument();
+  });
+
+  it('renders the virtualized thread list once the initial load is complete', () => {
+    mockUseStateStore.mockReturnValue({
+      isLoading: false,
+      threads: [{ id: 'thread-1' }],
+    });
+
+    render(<ThreadList />);
+
+    expect(screen.getByTestId('thread-list-header')).toBeInTheDocument();
+    expect(screen.getByTestId('thread-list-unseen-banner')).toBeInTheDocument();
+    expect(screen.getByTestId('virtuoso')).toBeInTheDocument();
+    expect(screen.queryByTestId('loading-channels')).not.toBeInTheDocument();
+  });
+});

From 853c313882b0c220c5cc0cc439ec3cb30d1f7391 Mon Sep 17 00:00:00 2001
From: Oliver Lazoroski <oliver.lazoroski@gmail.com>
Date: Mon, 9 Mar 2026 15:50:58 +0100
Subject: [PATCH 5/6] fix: constrain loading channel message width

---
 src/components/Channel/styling/Channel.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/Channel/styling/Channel.scss b/src/components/Channel/styling/Channel.scss
index 4f72e3c157..3c59656366 100644
--- a/src/components/Channel/styling/Channel.scss
+++ b/src/components/Channel/styling/Channel.scss
@@ -44,6 +44,10 @@
 
 .str-chat__loading-channel {
   $text-height: calc(var(--str-chat__spacing-px) * 20);
+  --str-chat__loading-channel-content-max-width: calc(
+    var(--str-chat__message-composer-max-width) +
+      var(--str-chat__message-composer-padding)
+  );
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -74,6 +78,8 @@
     .str-chat__message-list-scroll {
       width: 100%;
       height: 100%;
+      max-width: var(--str-chat__loading-channel-content-max-width);
+      margin-inline: auto;
     }
   }
 

From 273b1b679b2391ab1501271b42894ddcae579b8b Mon Sep 17 00:00:00 2001
From: Oliver Lazoroski <oliver.lazoroski@gmail.com>
Date: Mon, 9 Mar 2026 16:14:25 +0100
Subject: [PATCH 6/6] feat: refine loading channel skeleton layout

---
 src/components/Channel/styling/Channel.scss   | 78 ++++++++-----------
 src/components/Loading/LoadingChannel.tsx     | 22 +++---
 .../__snapshots__/LoadingChannel.test.js.snap | 37 ++-------
 3 files changed, 53 insertions(+), 84 deletions(-)

diff --git a/src/components/Channel/styling/Channel.scss b/src/components/Channel/styling/Channel.scss
index 3c59656366..8deae9d06c 100644
--- a/src/components/Channel/styling/Channel.scss
+++ b/src/components/Channel/styling/Channel.scss
@@ -43,7 +43,9 @@
 }
 
 .str-chat__loading-channel {
-  $text-height: calc(var(--str-chat__spacing-px) * 20);
+  $header-bar-height: calc(var(--str-chat__spacing-px) * 16);
+  $metadata-bar-height: calc(var(--str-chat__spacing-px) * 16);
+  $composer-control-height: calc(var(--str-chat__spacing-px) * 48);
   --str-chat__loading-channel-content-max-width: calc(
     var(--str-chat__message-composer-max-width) +
       var(--str-chat__message-composer-padding)
@@ -60,8 +62,8 @@
     }
 
     .str-chat__loading-channel-header-name {
-      height: $text-height;
-      width: calc(var(--str-chat__spacing-px) * 112);
+      height: $header-bar-height;
+      width: calc(var(--str-chat__spacing-px) * 120);
     }
 
     .str-chat__loading-channel-header-avatar {
@@ -88,18 +90,19 @@
     width: 100%;
     display: flex;
     flex-direction: column;
-    padding-block: var(--spacing-lg) var(--spacing-md);
+    gap: calc(var(--str-chat__spacing-px) * 28);
+    padding-block: calc(var(--str-chat__spacing-px) * 32)
+      calc(var(--str-chat__spacing-px) * 24);
 
     .str-chat__loading-channel-message {
       display: flex;
       width: 100%;
       column-gap: var(--spacing-sm);
-      padding-block: var(--spacing-xs);
 
       .str-chat__loading-channel-message-avatar {
         flex-shrink: 0;
-        width: calc(var(--str-chat__spacing-px) * 32);
-        height: calc(var(--str-chat__spacing-px) * 32);
+        width: calc(var(--str-chat__spacing-px) * 36);
+        height: calc(var(--str-chat__spacing-px) * 36);
         border-radius: 50%;
         align-self: end;
       }
@@ -109,43 +112,37 @@
         flex-direction: column;
         width: min(100%, var(--str-chat__message-max-width));
         max-width: var(--str-chat__message-max-width);
-        row-gap: var(--spacing-xxs);
+        row-gap: calc(var(--str-chat__spacing-px) * 12);
         min-width: 0;
       }
 
       .str-chat__loading-channel-message-bubble {
-        min-height: calc(var(--str-chat__spacing-px) * 52);
         width: min(100%, var(--str-chat__message-max-width));
-        border-radius: var(--message-bubble-radius-group-bottom);
-      }
-
-      .str-chat__loading-channel-message-bubble--sm {
-        width: min(54%, calc(var(--str-chat__spacing-px) * 216));
+        border-radius: var(--radius-3xl);
       }
 
       .str-chat__loading-channel-message-bubble--md {
-        width: min(68%, calc(var(--str-chat__spacing-px) * 272));
+        height: calc(var(--str-chat__spacing-px) * 64);
+        width: min(58%, calc(var(--str-chat__spacing-px) * 272));
       }
 
       .str-chat__loading-channel-message-bubble--lg {
-        width: min(82%, calc(var(--str-chat__spacing-px) * 328));
+        height: calc(var(--str-chat__spacing-px) * 84);
+        width: min(72%, calc(var(--str-chat__spacing-px) * 352));
       }
 
       .str-chat__loading-channel-message-metadata {
-        display: flex;
-        align-items: center;
-        gap: var(--spacing-xs);
-        min-width: 0;
+        height: $metadata-bar-height;
+        width: min(100%, var(--str-chat__message-max-width));
+        border-radius: 999px;
       }
 
-      .str-chat__loading-channel-message-sender {
-        height: calc(var(--str-chat__spacing-px) * 14);
-        width: calc(var(--str-chat__spacing-px) * 72);
+      .str-chat__loading-channel-message-metadata--sm {
+        width: calc(var(--str-chat__spacing-px) * 88);
       }
 
-      .str-chat__loading-channel-message-date {
-        height: calc(var(--str-chat__spacing-px) * 14);
-        width: calc(var(--str-chat__spacing-px) * 48);
+      .str-chat__loading-channel-message-metadata--md {
+        width: calc(var(--str-chat__spacing-px) * 124);
       }
 
       &.str-chat__loading-channel-message--outgoing {
@@ -154,20 +151,6 @@
         .str-chat__loading-channel-message-content {
           align-items: flex-end;
         }
-
-        .str-chat__loading-channel-message-bubble {
-          border-end-end-radius: var(--message-bubble-radius-tail);
-        }
-
-        .str-chat__loading-channel-message-metadata {
-          justify-content: flex-end;
-        }
-      }
-
-      &.str-chat__loading-channel-message--incoming {
-        .str-chat__loading-channel-message-bubble {
-          border-end-start-radius: var(--message-bubble-radius-tail);
-        }
       }
     }
   }
@@ -175,18 +158,22 @@
   .str-chat__message-composer-container--loading {
     pointer-events: none;
 
+    .str-chat__message-composer {
+      align-items: center;
+    }
+
     .str-chat__loading-channel-message-input-button {
       flex-shrink: 0;
-      width: var(--button-visual-height-md);
-      height: var(--button-visual-height-md);
+      width: $composer-control-height;
+      height: $composer-control-height;
       border-radius: var(--button-radius-full);
     }
 
     .str-chat__loading-channel-message-input-pill {
       flex: 1;
       min-width: 0;
-      height: var(--button-visual-height-md);
-      border-radius: var(--str-chat__message-input-border-radius);
+      height: $composer-control-height;
+      border-radius: 999px;
     }
   }
 }
@@ -281,8 +268,7 @@
       @include channel-loading-shimmer;
     }
 
-    .str-chat__loading-channel-message-sender,
-    .str-chat__loading-channel-message-date {
+    .str-chat__loading-channel-message-metadata {
       @include channel-loading-faded-bar;
     }
   }
diff --git a/src/components/Loading/LoadingChannel.tsx b/src/components/Loading/LoadingChannel.tsx
index 4bdf6b8f8d..ad666f8e95 100644
--- a/src/components/Loading/LoadingChannel.tsx
+++ b/src/components/Loading/LoadingChannel.tsx
@@ -1,11 +1,16 @@
 import React from 'react';
 
 type LoadingMessageProps = {
-  bubbleSize: 'sm' | 'md' | 'lg';
+  bubbleSize: 'md' | 'lg';
+  metadataSize: 'sm' | 'md';
   outgoing?: boolean;
 };
 
-const LoadingMessage = ({ bubbleSize, outgoing = false }: LoadingMessageProps) => (
+const LoadingMessage = ({
+  bubbleSize,
+  metadataSize,
+  outgoing = false,
+}: LoadingMessageProps) => (
   <div
     className={`str-chat__loading-channel-message ${
       outgoing
@@ -18,10 +23,9 @@ const LoadingMessage = ({ bubbleSize, outgoing = false }: LoadingMessageProps) =
       <div
         className={`str-chat__loading-channel-message-bubble str-chat__loading-channel-message-bubble--${bubbleSize}`}
       ></div>
-      <div className='str-chat__loading-channel-message-metadata'>
-        <div className='str-chat__loading-channel-message-sender'></div>
-        <div className='str-chat__loading-channel-message-date'></div>
-      </div>
+      <div
+        className={`str-chat__loading-channel-message-metadata str-chat__loading-channel-message-metadata--${metadataSize}`}
+      ></div>
     </div>
   </div>
 );
@@ -50,9 +54,9 @@ export const LoadingChannel = () => (
     <div className='str-chat__message-list str-chat__message-list--loading'>
       <div className='str-chat__message-list-scroll'>
         <div className='str-chat__loading-channel-message-list'>
-          <LoadingMessage bubbleSize='lg' />
-          <LoadingMessage bubbleSize='sm' outgoing />
-          <LoadingMessage bubbleSize='md' />
+          <LoadingMessage bubbleSize='lg' metadataSize='md' />
+          <LoadingMessage bubbleSize='md' metadataSize='sm' outgoing />
+          <LoadingMessage bubbleSize='lg' metadataSize='md' />
         </div>
       </div>
     </div>
diff --git a/src/components/Loading/__tests__/__snapshots__/LoadingChannel.test.js.snap b/src/components/Loading/__tests__/__snapshots__/LoadingChannel.test.js.snap
index 492168960c..a5b5753e5e 100644
--- a/src/components/Loading/__tests__/__snapshots__/LoadingChannel.test.js.snap
+++ b/src/components/Loading/__tests__/__snapshots__/LoadingChannel.test.js.snap
@@ -41,15 +41,8 @@ exports[`LoadingChannel should render component with default props 1`] = `
                 class="str-chat__loading-channel-message-bubble str-chat__loading-channel-message-bubble--lg"
               />
               <div
-                class="str-chat__loading-channel-message-metadata"
-              >
-                <div
-                  class="str-chat__loading-channel-message-sender"
-                />
-                <div
-                  class="str-chat__loading-channel-message-date"
-                />
-              </div>
+                class="str-chat__loading-channel-message-metadata str-chat__loading-channel-message-metadata--md"
+              />
             </div>
           </div>
           <div
@@ -59,18 +52,11 @@ exports[`LoadingChannel should render component with default props 1`] = `
               class="str-chat__loading-channel-message-content"
             >
               <div
-                class="str-chat__loading-channel-message-bubble str-chat__loading-channel-message-bubble--sm"
+                class="str-chat__loading-channel-message-bubble str-chat__loading-channel-message-bubble--md"
               />
               <div
-                class="str-chat__loading-channel-message-metadata"
-              >
-                <div
-                  class="str-chat__loading-channel-message-sender"
-                />
-                <div
-                  class="str-chat__loading-channel-message-date"
-                />
-              </div>
+                class="str-chat__loading-channel-message-metadata str-chat__loading-channel-message-metadata--sm"
+              />
             </div>
           </div>
           <div
@@ -83,18 +69,11 @@ exports[`LoadingChannel should render component with default props 1`] = `
               class="str-chat__loading-channel-message-content"
             >
               <div
-                class="str-chat__loading-channel-message-bubble str-chat__loading-channel-message-bubble--md"
+                class="str-chat__loading-channel-message-bubble str-chat__loading-channel-message-bubble--lg"
               />
               <div
-                class="str-chat__loading-channel-message-metadata"
-              >
-                <div
-                  class="str-chat__loading-channel-message-sender"
-                />
-                <div
-                  class="str-chat__loading-channel-message-date"
-                />
-              </div>
+                class="str-chat__loading-channel-message-metadata str-chat__loading-channel-message-metadata--md"
+              />
             </div>
           </div>
         </div>