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

* 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

res/css/_components.pcss

@@ -280,6 +280,7 @@
 @import "./views/rooms/RoomListPanel/_RoomListPrimaryFilters.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListSearch.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListSecondaryFilters.pcss";
+@import "./views/rooms/RoomListPanel/_RoomListSkeleton.pcss";
 @import "./views/rooms/_AppsDrawer.pcss";
 @import "./views/rooms/_Autocomplete.pcss";
 @import "./views/rooms/_AuxPanel.pcss";

res/css/views/rooms/RoomListPanel/_RoomListSkeleton.pcss

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_RoomListSkeleton {
+    position: relative;
+    margin-left: 4px;
+    height: 100%;
+
+    &::before {
+        background-color: var(--cpd-color-bg-subtle-secondary);
+        width: 100%;
+        height: 100%;
+
+        content: "";
+        position: absolute;
+        mask-repeat: repeat-y;
+        mask-size: auto 96px;
+        mask-image: url("$(res)/img/element-icons/roomlist/room-list-item-skeleton.svg");
+    }
+}

res/css/views/rooms/_RoomSublist.pcss

@@ -404,8 +404,7 @@ Please see LICENSE files in the repository root for full details.
     height: 240px;
 
     &::before {
-        background: $roomsublist-skeleton-ui-bg;
-
+        background-color: var(--cpd-color-bg-subtle-secondary);
         width: 100%;
         height: 100%;