Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit fa9490b

Browse files
committed
Add skeleton UI for Room List when no rooms
1 parent 294876f commit fa9490b

File tree

8 files changed

+34
-0
lines changed

8 files changed

+34
-0
lines changed

res/css/views/rooms/_RoomSublist.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -383,3 +383,22 @@ limitations under the License.
383383
.mx_RoomSublist_addRoomTooltip {
384384
margin-top: -3px;
385385
}
386+
387+
.mx_RoomSublist_skeletonUI {
388+
position: relative;
389+
margin-left: 4px;
390+
height: 288px;
391+
392+
&::before {
393+
background: $roomsublist-skeleton-ui-bg;
394+
395+
width: 100%;
396+
height: 100%;
397+
398+
content: '';
399+
position: absolute;
400+
mask-repeat: repeat-y;
401+
mask-size: auto 48px;
402+
mask-image: url('$(res)/img/element-icons/roomlist/skeleton-ui.svg');
403+
}
404+
}
Lines changed: 5 additions & 0 deletions
Loading

res/themes/dark/css/_dark.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@ $roomlist-filter-active-bg-color: $bg-color;
117117
$roomlist-bg-color: rgba(33, 38, 44, 0.90);
118118
$roomlist-header-color: $tertiary-fg-color;
119119
$roomsublist-divider-color: $primary-fg-color;
120+
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
120121

121122
$groupFilterPanel-divider-color: $roomlist-header-color;
122123

res/themes/legacy-dark/css/_legacy-dark.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@ $roomlist-filter-active-bg-color: $roomlist-button-bg-color;
114114
$roomlist-bg-color: $header-panel-bg-color;
115115

116116
$roomsublist-divider-color: $primary-fg-color;
117+
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
117118

118119
$groupFilterPanel-divider-color: $roomlist-header-color;
119120

res/themes/legacy-light/css/_legacy-light.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,7 @@ $roomlist-filter-active-bg-color: $roomlist-button-bg-color;
181181
$roomlist-bg-color: $header-panel-bg-color;
182182
$roomlist-header-color: $primary-fg-color;
183183
$roomsublist-divider-color: $primary-fg-color;
184+
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
184185

185186
$groupFilterPanel-divider-color: $roomlist-header-color;
186187

res/themes/light/css/_light.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,7 @@ $roomlist-filter-active-bg-color: #ffffff;
175175
$roomlist-bg-color: rgba(245, 245, 245, 0.90);
176176
$roomlist-header-color: $tertiary-fg-color;
177177
$roomsublist-divider-color: $primary-fg-color;
178+
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
178179

179180
$groupFilterPanel-divider-color: $roomlist-header-color;
180181

src/components/views/rooms/RoomList.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -332,6 +332,8 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
332332
return p;
333333
}, [] as TagID[]);
334334

335+
const showSkeleton = tagOrder.every(tag => !this.state.sublists[tag]?.length);
336+
335337
for (const orderedTagId of tagOrder) {
336338
const orderedRooms = this.state.sublists[orderedTagId] || [];
337339
const extraTiles = orderedTagId === DefaultTagID.Invite ? this.renderCommunityInvites() : null;
@@ -356,6 +358,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
356358
addRoomContextMenu={aesthetics.addRoomContextMenu}
357359
isMinimized={this.props.isMinimized}
358360
onResize={this.props.onResize}
361+
showSkeleton={showSkeleton}
359362
extraBadTilesThatShouldntExist={extraTiles}
360363
/>);
361364
}

src/components/views/rooms/RoomSublist.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ interface IProps {
7171
isMinimized: boolean;
7272
tagId: TagID;
7373
onResize: () => void;
74+
showSkeleton?: boolean;
7475

7576
// TODO: Don't use this. It's for community invites, and community invites shouldn't be here.
7677
// You should feel bad if you use this.
@@ -877,6 +878,8 @@ export default class RoomSublist extends React.Component<IProps, IState> {
877878
</Resizable>
878879
</React.Fragment>
879880
);
881+
} else if (this.props.showSkeleton && this.state.isExpanded) {
882+
content = <div className="mx_RoomSublist_skeletonUI" />;
880883
}
881884

882885
return (

0 commit comments

Comments
 (0)