Add/loading state to unified nav

client/layout/sidebar-unified/style.scss

@@ -1,11 +1,21 @@
 .sidebar-unified__switcher {
 	position: absolute;
 	z-index: 1000;
-	background-color: #633;
+	background-color:red;
 	right: 0;
+	bottom: 0;
 	cursor: pointer;
 	text-decoration: underline;
 	font-size: 0.75rem;
+	padding: 5px 10px;
+}
+
+.sidebar-unified__menu-loading {
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
 }
 
 .sidebar-unified__sparkline {

client/my-sites/sidebar-unified/index.jsx

@@ -11,6 +11,7 @@
  * External dependencies
  */
 import React from 'react';
+import { useSelector } from 'react-redux';
 
 /**
  * Internal dependencies
@@ -20,14 +21,21 @@ import MySitesSidebarUnifiedItem from './item';
 import MySitesSidebarUnifiedMenu from './menu';
 import useSiteMenuItems from './use-site-menu-items';
 import useDomainsViewStatus from './use-domains-view-status';
+import { getIsRequestingAdminMenu } from 'state/admin-menu/selectors';
 import Sidebar from 'layout/sidebar';
 import SidebarSeparator from 'layout/sidebar/separator';
 import 'layout/sidebar-unified/style.scss';
 import 'state/admin-menu/init';
+import Spinner from 'components/spinner';
 
 export const MySitesSidebarUnified = ( { path } ) => {
 	const menuItems = useSiteMenuItems();
 	const isAllDomainsView = useDomainsViewStatus();
+	const isRequestingMenu = useSelector( getIsRequestingAdminMenu );
+
+	if ( isRequestingMenu ) {
+		return <Spinner className="sidebar-unified__menu-loading" />;
+	}
 
 	return (
 		<Sidebar>

client/state/admin-menu/reducer.js

@@ -1,17 +1,32 @@
 /**
  * Internal dependencies
  */
-import { withStorageKey, keyedReducer } from 'state/utils';
+import { withStorageKey, keyedReducer, combineReducers } from 'state/utils';
 import 'state/data-layer/wpcom/sites/admin-menu';
-import { ADMIN_MENU_RECEIVE } from 'state/action-types';
+import { ADMIN_MENU_RECEIVE, ADMIN_MENU_REQUEST } from 'state/action-types';
 
-export const adminMenu = ( state = [], action ) => {
+export const menus = keyedReducer( 'siteId', ( state = [], action ) => {
 	switch ( action.type ) {
 		case ADMIN_MENU_RECEIVE:
 			return [ ...state, ...action.menu ];
 		default:
 			return state;
 	}
-};
+} );
 
-export default withStorageKey( 'adminMenu', keyedReducer( 'siteId', adminMenu ) );
+export function requesting( state = false, action ) {
+	switch ( action.type ) {
+		case ADMIN_MENU_REQUEST:
+		case ADMIN_MENU_RECEIVE:
+			return action.type === ADMIN_MENU_REQUEST;
+	}
+
+	return state;
+}
+
+const reducer = combineReducers( {
+	menus,
+	requesting,
+} );
+
+export default withStorageKey( 'adminMenu', reducer );

client/state/admin-menu/selectors/index.js

@@ -4,11 +4,21 @@
 import 'state/admin-menu/init';
 
 export function getAdminMenu( state, siteId ) {
-	const stateSlice = state?.adminMenu;
+	const stateSlice = state?.adminMenu?.menus;
 
 	if ( ! stateSlice || ! siteId ) {
 		return null;
 	}
 
-	return state.adminMenu[ siteId ] || null;
+	return state.adminMenu.menus[ siteId ] || null;
+}
+
+export function getIsRequestingAdminMenu( state ) {
+	const stateSlice = state?.adminMenu?.requesting;
+
+	if ( ! stateSlice ) {
+		return null;
+	}
+
+	return state.adminMenu.requesting;
 }

client/state/admin-menu/test/reducer.js

@@ -7,14 +7,14 @@ import deepFreeze from 'deep-freeze';
  * Internal dependencies
  */
 import menuFixture from './fixture/menu-fixture';
-import { ADMIN_MENU_RECEIVE } from 'state/action-types';
-import adminReducer from '../reducer';
+import { ADMIN_MENU_RECEIVE, ADMIN_MENU_REQUEST } from 'state/action-types';
+import { menus as menusReducer, requesting as requestingReducer } from '../reducer';
 
 describe( 'reducer', () => {
-	describe( 'adminReducer', () => {
+	describe( 'menus reducer', () => {
 		test( 'returns default state when no arguments provided', () => {
 			const defaultState = deepFreeze( {} );
-			expect( adminReducer( undefined, {} ) ).toEqual( defaultState );
+			expect( menusReducer( undefined, {} ) ).toEqual( defaultState );
 		} );
 
 		test( 'adds menu to state keyed by provided siteId', () => {
@@ -23,11 +23,44 @@ describe( 'reducer', () => {
 				siteId: 123456,
 				menu: menuFixture,
 			};
-			const initalState = deepFreeze( {} );
+			const initialState = deepFreeze( {} );
 
-			expect( adminReducer( initalState, action ) ).toEqual( {
+			expect( menusReducer( initialState, action ) ).toEqual( {
 				123456: menuFixture,
 			} );
 		} );
 	} );
+
+	describe( 'requesting reducer', () => {
+		test( 'returns default state when no action provided', () => {
+			expect( requestingReducer( undefined, {} ) ).toBe( false );
+		} );
+
+		test( 'returns true for ADMIN_MENU_REQUEST action', () => {
+			const initialState = deepFreeze( false );
+			expect(
+				requestingReducer( initialState, {
+					type: ADMIN_MENU_REQUEST,
+				} )
+			).toBe( true );
+		} );
+
+		test( 'resets to false for ADMIN_MENU_RECEIVE action', () => {
+			const initialState = deepFreeze( true );
+			expect(
+				requestingReducer( initialState, {
+					type: ADMIN_MENU_RECEIVE,
+				} )
+			).toBe( false );
+		} );
+
+		test.each( [ false, true ] )( 'ignores invalid action types', ( theInitialStateBool ) => {
+			const initialState = deepFreeze( theInitialStateBool );
+			expect(
+				requestingReducer( initialState, {
+					type: 'A_FAKE_ACTION_SHOULD_BE_IGNORED',
+				} )
+			).toBe( theInitialStateBool );
+		} );
+	} );
 } );

client/state/admin-menu/test/selectors.js

@@ -20,15 +20,23 @@ describe( 'selectors', () => {
 		} );
 
 		test( 'returns null when siteId is not provided', () => {
-			const state = {};
+			const state = {
+				adminMenu: {
+					menus: {
+						56789: frozenFixture,
+					},
+				},
+			};
 
 			expect( getAdminMenu( state ) ).toEqual( null );
 		} );
 
 		test( 'returns null when requested siteId key is not present', () => {
 			const state = {
 				adminMenu: {
-					56789: frozenFixture,
+					menus: {
+						56789: frozenFixture,
+					},
 				},
 			};
 
@@ -38,10 +46,12 @@ describe( 'selectors', () => {
 		test( 'returns menu data when siteId is present', () => {
 			const state = {
 				adminMenu: {
-					56789: {},
-					12345: frozenFixture,
-					84649: {},
-					95538: {},
+					menus: {
+						56789: {},
+						12345: frozenFixture,
+						84649: {},
+						95538: {},
+					},
 				},
 			};