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,16 +84,15 @@ 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 <></>;
   }
 
-  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 => {
+  const componentToRender = joinableRooms.inProgress ? (
+    <SessionSpinner loading={true} />
+  ) : (
+    joinableRooms.rooms.map(r => {
       return (
         <SessionJoinableRoomRow
           key={r.id}
@@ -105,7 +105,14 @@ export const SessionJoinableRooms = () => {
           }}
         />
       );
-        })}
+    })
+  );
+
+  return (
+    <Flex container={true} flexGrow={1} flexDirection="column" width="93%">
+      <H3 text={window.i18n('orJoinOneOfThese')} />
+      <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;