Skip to content

feat: redesign ChannelList loading skeletons #2988

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
oliverlaz merged 2 commits into from
Mar 9, 2026
Merged

feat: redesign ChannelList loading skeletons #2988

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d2848b7
feat: redesign channel list loading skeletons
oliverlaz Mar 9, 2026
ddea05f
fix: reduce channel list loading layout shift
oliverlaz Mar 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion src/components/ChannelList/ChannelListMessenger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
18 changes: 14 additions & 4 deletions src/components/ChannelList/__tests__/__snapshots__/ChannelListMessenger.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
`;
24 changes: 13 additions & 11 deletions src/components/Loading/LoadingChannels.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
103 changes: 81 additions & 22 deletions src/components/Loading/__tests__/__snapshots__/LoadingChannels.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
87 changes: 87 additions & 0 deletions src/components/Loading/styling/LoadingChannels.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
1 change: 1 addition & 0 deletions src/components/Loading/styling/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
@use 'LoadingChannels';
@use 'LoadingIndicator';
Loading