nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Add loading state to the new room list view (#29725)

Browse Source 
* add loading state to view model and spinner to room list vieqw

* Update snapshots and add loading test

* avoid nested ternary operator

* Add room list skeleton loading state

* Fix loading logic

- Create RoomListStoreV3Event as to not conflict with loading event definition in Create RoomListStoreEvent.
- Add a loaded event
- Use it to determine loaded state in useFilteredRooms rather than the update event which gets fired in other cases.

* Fix isLoadingRooms logic

* update snapshots and fix test

* Forcing an empty commit to fix PR

* Fix _components.pcss order

* Fix test that wasn't doing anything

* fix tests
This commit is contained in:
David Langley
2025-05-02 14:12:00 +01:00
committed by GitHub
parent 72429c1350
commit a430501271
17 changed files with 110 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
test/unit-tests/components/viewmodels/roomlist/RoomListViewModel-test.tsx
View File

@@ -9,9 +9,8 @@ import { range } from "lodash";
import { act, renderHook, waitFor } from "jest-matrix-react";
import { mocked } from "jest-mock";
import RoomListStoreV3 from "../../../../../src/stores/room-list-v3/RoomListStoreV3";
import RoomListStoreV3, { LISTS_UPDATE_EVENT } from "../../../../../src/stores/room-list-v3/RoomListStoreV3";
import { mkStubRoom } from "../../../../test-utils";
import { LISTS_UPDATE_EVENT } from "../../../../../src/stores/room-list/RoomListStore";
import { useRoomListViewModel } from "../../../../../src/components/viewmodels/roomlist/RoomListViewModel";
import { FilterKey } from "../../../../../src/stores/room-list-v3/skip-list/filters";
import { SecondaryFilters } from "../../../../../src/components/viewmodels/roomlist/useFilteredRooms";

1
test/unit-tests/components/views/rooms/RoomListPanel/EmptyRoomList-test.tsx
View File

@@ -20,6 +20,7 @@ describe("<EmptyRoomList />", () => {
beforeEach(() => {
vm = {
isLoadingRooms: false,
rooms: [],
primaryFilters: [],
activateSecondaryFilter: jest.fn().mockReturnValue({}),

1
test/unit-tests/components/views/rooms/RoomListPanel/RoomList-test.tsx
View File

@@ -29,6 +29,7 @@ describe("<RoomList />", () => {
matrixClient = stubClient();
const rooms = Array.from({ length: 10 }, (_, i) => mkRoom(matrixClient, `room${i}`));
vm = {
isLoadingRooms: false,
rooms,
primaryFilters: [],
activateSecondaryFilter: () => {},

1
test/unit-tests/components/views/rooms/RoomListPanel/RoomListFilterMenu-test.tsx
View File

@@ -26,6 +26,7 @@ describe("<RoomListFilterMenu />", () => {
beforeEach(() => {
vm = {
isLoadingRooms: false,
rooms: [],
canCreateRoom: true,
createRoom: jest.fn(),

1
test/unit-tests/components/views/rooms/RoomListPanel/RoomListPrimaryFilters-test.tsx
View File

@@ -20,6 +20,7 @@ describe("<RoomListPrimaryFilters />", () => {
beforeEach(() => {
vm = {
isLoadingRooms: false,
rooms: [],
canCreateRoom: true,
createRoom: jest.fn(),

1
test/unit-tests/components/views/rooms/RoomListPanel/RoomListSecondaryFilters-test.tsx
View File

@@ -18,6 +18,7 @@ describe("<RoomListSecondaryFilters />", () => {
beforeEach(() => {
vm = {
isLoadingRooms: false,
rooms: [],
canCreateRoom: true,
createRoom: jest.fn(),

11
test/unit-tests/components/views/rooms/RoomListPanel/RoomListView-test.tsx
View File

@@ -24,6 +24,7 @@ jest.mock("../../../../../../src/components/viewmodels/roomlist/RoomListViewMode
describe("<RoomListView />", () => {
const defaultValue: RoomListViewState = {
isLoadingRooms: false,
rooms: [],
primaryFilters: [],
activateSecondaryFilter: jest.fn().mockReturnValue({}),
@@ -43,6 +44,16 @@ describe("<RoomListView />", () => {
jest.resetAllMocks();
});
it("should render the loading room list", () => {
mocked(useRoomListViewModel).mockReturnValue({
...defaultValue,
isLoadingRooms: true,
});
const roomList = render(<RoomListView />);
expect(roomList.container.querySelector(".mx_RoomListSkeleton")).not.toBeNull();
});
it("should render an empty room list", () => {
mocked(useRoomListViewModel).mockReturnValue(defaultValue);

107
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap
View File

@@ -183,47 +183,8 @@ exports[`<RoomListPanel /> should not render the RoomListSearch component when U
</button>
</div>
<div
class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
data-testid="empty-room-list"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<span
class="mx_EmptyRoomList_GenericPlaceholder_title"
>
No chats yet
</span>
<span
class="mx_EmptyRoomList_GenericPlaceholder_description"
>
Get started by messaging someone
</span>
<div
class="mx_Flex mx_EmptyRoomList_DefaultPlaceholder"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
>
<button
class="_button_vczzf_8 _has-icon_vczzf_57"
data-kind="secondary"
data-size="sm"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="20"
viewBox="0 0 24 24"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 12q-1.65 0-2.825-1.175T6 8t1.175-2.825T10 4t2.825 1.175T14 8t-1.175 2.825T10 12m-8 6v-.8q0-.85.438-1.562.437-.713 1.162-1.088a14.8 14.8 0 0 1 3.15-1.163A13.8 13.8 0 0 1 10 13q1.65 0 3.25.387 1.6.388 3.15 1.163.724.375 1.163 1.087Q18 16.35 18 17.2v.8q0 .824-.587 1.413A1.93 1.93 0 0 1 16 20H4q-.824 0-1.412-.587A1.93 1.93 0 0 1 2 18m2 0h12v-.8a.97.97 0 0 0-.5-.85q-1.35-.675-2.725-1.012a11.6 11.6 0 0 0-5.55 0Q5.85 15.675 4.5 16.35a.97.97 0 0 0-.5.85zm6-8q.825 0 1.412-.588Q12 8.826 12 8q0-.824-.588-1.412A1.93 1.93 0 0 0 10 6q-.825 0-1.412.588A1.93 1.93 0 0 0 8 8q0 .825.588 1.412Q9.175 10 10 10m7 1h2v2q0 .424.288.713.287.287.712.287.424 0 .712-.287A.97.97 0 0 0 21 13v-2h2q.424 0 .712-.287A.97.97 0 0 0 24 10a.97.97 0 0 0-.288-.713A.97.97 0 0 0 23 9h-2V7a.97.97 0 0 0-.288-.713A.97.97 0 0 0 20 6a.97.97 0 0 0-.712.287A.97.97 0 0 0 19 7v2h-2a.97.97 0 0 0-.712.287A.97.97 0 0 0 16 10q0 .424.288.713.287.287.712.287"
/>
</svg>
New message
</button>
</div>
</div>
class="mx_RoomListSkeleton"
/>
</section>
</DocumentFragment>
`;
@@ -473,68 +434,8 @@ exports[`<RoomListPanel /> should render the RoomListSearch component when UICom
</button>
</div>
<div
class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
data-testid="empty-room-list"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<span
class="mx_EmptyRoomList_GenericPlaceholder_title"
>
No chats yet
</span>
<span
class="mx_EmptyRoomList_GenericPlaceholder_description"
>
Get started by messaging someone or by creating a room
</span>
<div
class="mx_Flex mx_EmptyRoomList_DefaultPlaceholder"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
>
<button
class="_button_vczzf_8 _has-icon_vczzf_57"
data-kind="secondary"
data-size="sm"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="20"
viewBox="0 0 24 24"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 12q-1.65 0-2.825-1.175T6 8t1.175-2.825T10 4t2.825 1.175T14 8t-1.175 2.825T10 12m-8 6v-.8q0-.85.438-1.562.437-.713 1.162-1.088a14.8 14.8 0 0 1 3.15-1.163A13.8 13.8 0 0 1 10 13q1.65 0 3.25.387 1.6.388 3.15 1.163.724.375 1.163 1.087Q18 16.35 18 17.2v.8q0 .824-.587 1.413A1.93 1.93 0 0 1 16 20H4q-.824 0-1.412-.587A1.93 1.93 0 0 1 2 18m2 0h12v-.8a.97.97 0 0 0-.5-.85q-1.35-.675-2.725-1.012a11.6 11.6 0 0 0-5.55 0Q5.85 15.675 4.5 16.35a.97.97 0 0 0-.5.85zm6-8q.825 0 1.412-.588Q12 8.826 12 8q0-.824-.588-1.412A1.93 1.93 0 0 0 10 6q-.825 0-1.412.588A1.93 1.93 0 0 0 8 8q0 .825.588 1.412Q9.175 10 10 10m7 1h2v2q0 .424.288.713.287.287.712.287.424 0 .712-.287A.97.97 0 0 0 21 13v-2h2q.424 0 .712-.287A.97.97 0 0 0 24 10a.97.97 0 0 0-.288-.713A.97.97 0 0 0 23 9h-2V7a.97.97 0 0 0-.288-.713A.97.97 0 0 0 20 6a.97.97 0 0 0-.712.287A.97.97 0 0 0 19 7v2h-2a.97.97 0 0 0-.712.287A.97.97 0 0 0 16 10q0 .424.288.713.287.287.712.287"
/>
</svg>
New message
</button>
<button
class="_button_vczzf_8 _has-icon_vczzf_57"
data-kind="secondary"
data-size="sm"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="20"
viewBox="0 0 24 24"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m8.566 17-.944 4.094q-.086.406-.372.656t-.687.25q-.543 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.801-3.5H3.158q-.572 0-.916-.484a1.27 1.27 0 0 1-.2-1.078 1.12 1.12 0 0 1 1.116-.938H6.85l1.145-5h-3.12q-.57 0-.915-.484a1.27 1.27 0 0 1-.2-1.078A1.12 1.12 0 0 1 4.875 7h3.691l.945-4.094q.085-.406.372-.656.286-.25.686-.25.544 0 .887.469.345.468.2 1.031l-.8 3.5h4.578l.944-4.094q.085-.406.372-.656.286-.25.687-.25.543 0 .887.469t.2 1.031L17.723 7h3.119q.573 0 .916.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937H17.15l-1.145 5h3.12q.57 0 .915.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937h-3.691l-.944 4.094q-.087.406-.373.656t-.686.25q-.544 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.8-3.5zm.573-2.5h4.578l1.144-5h-4.578z"
/>
</svg>
New room
</button>
</div>
</div>
class="mx_RoomListSkeleton"
/>
</section>
</DocumentFragment>
`;

3
test/unit-tests/stores/room-list-v3/RoomListStoreV3-test.ts
View File

@@ -10,13 +10,12 @@ import { logger } from "matrix-js-sdk/src/logger";
import type { MatrixClient } from "matrix-js-sdk/src/matrix";
import type { RoomNotificationState } from "../../../../src/stores/notifications/RoomNotificationState";
import { RoomListStoreV3Class } from "../../../../src/stores/room-list-v3/RoomListStoreV3";
import { LISTS_UPDATE_EVENT, RoomListStoreV3Class } from "../../../../src/stores/room-list-v3/RoomListStoreV3";
import { AsyncStoreWithClient } from "../../../../src/stores/AsyncStoreWithClient";
import { RecencySorter } from "../../../../src/stores/room-list-v3/skip-list/sorters/RecencySorter";
import { mkEvent, mkMessage, mkSpace, stubClient, upsertRoomStateEvents } from "../../../test-utils";
import { getMockedRooms } from "./skip-list/getMockedRooms";
import { AlphabeticSorter } from "../../../../src/stores/room-list-v3/skip-list/sorters/AlphabeticSorter";
import { LISTS_UPDATE_EVENT } from "../../../../src/stores/room-list/RoomListStore";
import dispatcher from "../../../../src/dispatcher/dispatcher";
import SpaceStore from "../../../../src/stores/spaces/SpaceStore";
import { MetaSpace, UPDATE_SELECTED_SPACE } from "../../../../src/stores/spaces";