From e54d803343e905cef10e2fd6b34f99f998e89d2a Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 11 Oct 2021 10:50:33 +0100 Subject: [PATCH 1/3] Tweak skeleton UI height to be more reasonable --- res/css/views/rooms/_RoomSublist.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.scss index 95b9f1822df..315ce08da5b 100644 --- a/res/css/views/rooms/_RoomSublist.scss +++ b/res/css/views/rooms/_RoomSublist.scss @@ -391,7 +391,7 @@ limitations under the License. .mx_RoomSublist_skeletonUI { position: relative; margin-left: 4px; - height: 288px; + height: 240px; &::before { background: $roomsublist-skeleton-ui-bg; From 11480e8641a4776defab4e629eb102d0b5bd6b4d Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 11 Oct 2021 10:50:49 +0100 Subject: [PATCH 2/3] Hide Skeleton UI if you have Suggested Rooms --- src/components/views/rooms/RoomList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx index 5ae2939c743..326e5cd8922 100644 --- a/src/components/views/rooms/RoomList.tsx +++ b/src/components/views/rooms/RoomList.tsx @@ -449,8 +449,8 @@ export default class RoomList extends React.PureComponent { } private renderSublists(): React.ReactElement[] { - // show a skeleton UI if the user is in no rooms and they are not filtering - const showSkeleton = !this.state.isNameFiltering && + // show a skeleton UI if the user is in no rooms and they are not filtering and have no suggested rooms + const showSkeleton = !this.state.isNameFiltering && !this.state.suggestedRooms?.length && Object.values(RoomListStore.instance.unfilteredLists).every(list => !list?.length); return TAG_ORDER.reduce((tags, tagId) => { From d050c0070347f313d0fbb3950210cefe110fc34e Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 12 Oct 2021 10:30:36 +0100 Subject: [PATCH 3/3] Fix room list skeleton ui for narrow room list --- res/css/views/rooms/_RoomSublist.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.scss index 315ce08da5b..0cf5f5a9e0c 100644 --- a/res/css/views/rooms/_RoomSublist.scss +++ b/res/css/views/rooms/_RoomSublist.scss @@ -406,3 +406,8 @@ limitations under the License. mask-image: url('$(res)/img/element-icons/roomlist/skeleton-ui.svg'); } } + +.mx_RoomSublist_minimized .mx_RoomSublist_skeletonUI { + width: 32px; // cut off the horizontal lines in the svg + margin-left: 10px; // align with sublist + buttons +}