show a spinner while default rooms are loading

ts/components/session/SessionJoinableDefaultRooms.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useReducer, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import {
   joinOpenGroupV2WithUIEvents,
@@ -11,6 +11,7 @@ import { Avatar, AvatarSize } from '../Avatar';
 import { Flex } from '../basic/Flex';
 import { PillContainer } from '../basic/PillContainer';
 import { H3 } from '../basic/Text';
+import { SessionSpinner } from './SessionSpinner';
 // tslint:disable: no-void-expression
 
 export type JoinableRoomProps = {
@@ -83,29 +84,35 @@ const SessionJoinableRoomRow = (props: JoinableRoomProps) => {
 export const SessionJoinableRooms = () => {
   const joinableRooms = useSelector((state: StateType) => state.defaultRooms);
 
-  if (!joinableRooms?.length) {
-    window?.log?.info('no default joinable rooms yet');
+  if (!joinableRooms.inProgress && !joinableRooms.rooms?.length) {
+    window?.log?.info('no default joinable rooms yet and not in progress');
     return <></>;
   }
 
+  const componentToRender = joinableRooms.inProgress ? (
+    <SessionSpinner loading={true} />
+  ) : (
+    joinableRooms.rooms.map(r => {
+      return (
+        <SessionJoinableRoomRow
+          key={r.id}
+          completeUrl={r.completeUrl}
+          name={r.name}
+          roomId={r.id}
+          base64Data={r.base64Data}
+          onClick={completeUrl => {
+            void joinOpenGroupV2WithUIEvents(completeUrl, true, false);
+          }}
+        />
+      );
+    })
+  );
+
   return (
     <Flex container={true} flexGrow={1} flexDirection="column" width="93%">
       <H3 text={window.i18n('orJoinOneOfThese')} />
-      <Flex container={true} flexGrow={1} flexWrap="wrap">
-        {joinableRooms.map(r => {
-          return (
-            <SessionJoinableRoomRow
-              key={r.id}
-              completeUrl={r.completeUrl}
-              name={r.name}
-              roomId={r.id}
-              base64Data={r.base64Data}
-              onClick={completeUrl => {
-                void joinOpenGroupV2WithUIEvents(completeUrl, true, false);
-              }}
-            />
-          );
-        })}
+      <Flex container={true} flexGrow={1} flexWrap="wrap" justifyContent="center">
+        {componentToRender}
       </Flex>
     </Flex>
   );

ts/opengroup/opengroupV2/ApiUtil.ts

@@ -3,7 +3,7 @@ import { FileServerV2Request } from '../../fileserver/FileServerApiV2';
 import { PubKey } from '../../session/types';
 import { allowOnlyOneAtATime } from '../../session/utils/Promise';
 import { fromBase64ToArrayBuffer, fromHex } from '../../session/utils/String';
-import { updateDefaultRooms } from '../../state/ducks/defaultRooms';
+import { updateDefaultRooms, updateDefaultRoomsInProgress } from '../../state/ducks/defaultRooms';
 import { getCompleteUrlFromRoom } from '../utils/OpenGroupUtils';
 import { parseOpenGroupV2 } from './JoinOpenGroupV2';
 import { getAllRoomInfos } from './OpenGroupAPIV2';
@@ -120,7 +120,10 @@ const loadDefaultRoomsSingle = () =>
  * This call will only run once at a time.
  */
 export const loadDefaultRooms = async () => {
+  window.inboxStore?.dispatch(updateDefaultRoomsInProgress(true));
   const allRooms: Array<OpenGroupV2InfoJoinable> = await loadDefaultRoomsSingle();
+  window.inboxStore?.dispatch(updateDefaultRoomsInProgress(false));
+
   if (allRooms !== undefined) {
     window.inboxStore?.dispatch(updateDefaultRooms(allRooms));
   }

ts/state/ducks/defaultRooms.tsx

@@ -1,9 +1,15 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { OpenGroupV2InfoJoinable } from '../../opengroup/opengroupV2/ApiUtil';
 
-export type DefaultRoomsState = Array<OpenGroupV2InfoJoinable>;
+export type DefaultRoomsState = {
+  rooms: Array<OpenGroupV2InfoJoinable>;
+  inProgress: boolean;
+};
 
-const initialState: DefaultRoomsState = [];
+const initialState: DefaultRoomsState = {
+  rooms: [],
+  inProgress: false,
+};
 
 /**
  * Payload to dispatch to update the base64 data of a default room
@@ -21,12 +27,18 @@ const defaultRoomsSlice = createSlice({
   initialState,
   reducers: {
     updateDefaultRooms(state, action) {
-      window?.log?.warn('updating default rooms', action.payload);
-      return action.payload as DefaultRoomsState;
+      window?.log?.info('updating default rooms', action.payload);
+      const rooms = action.payload as Array<OpenGroupV2InfoJoinable>;
+      return { ...state, rooms: rooms };
+    },
+    updateDefaultRoomsInProgress(state, action) {
+      const inProgress = action.payload as boolean;
+      window?.log?.info('fetching default rooms inProgress?', action.payload);
+      return { ...state, inProgress };
     },
     updateDefaultBase64RoomData(state, action: PayloadAction<Base64Update>) {
       const payload = action.payload;
-      const newState = state.map(room => {
+      const newRoomsState = state.rooms.map(room => {
         if (room.id === payload.roomId) {
           return {
             ...room,
@@ -35,11 +47,15 @@ const defaultRoomsSlice = createSlice({
         }
         return room;
       });
-      return newState;
+      return { ...state, rooms: newRoomsState };
     },
   },
 });
 
 const { actions, reducer } = defaultRoomsSlice;
-export const { updateDefaultRooms, updateDefaultBase64RoomData } = actions;
+export const {
+  updateDefaultRooms,
+  updateDefaultBase64RoomData,
+  updateDefaultRoomsInProgress,
+} = actions;
 export const defaultRoomReducer = reducer;