feat(sidebar): show loading state when initially loading connections

Author: gribnoysup

configs/testing-library-compass/src/index.tsx

@@ -81,9 +81,11 @@ type TestConnectionsOptions = {
    */
   preferences?: Partial<AllPreferences>;
   /**
-   * Initial list of connections to be "loaded" to the application
+   * Initial list of connections to be "loaded" to the application. Empty list
+   * by default. You can explicitly pass `null` to disable initial preloading of
+   * the connections
    */
-  connections?: ConnectionInfo[];
+  connections?: ConnectionInfo[] | null;
   /**
    * Connection function that returns DataService when connecting to a
    * connection with the connections store. Second argument is a constructor
@@ -266,6 +268,9 @@ function createWrapper(
   TestingLibraryWrapper: ComponentWithChildren = EmptyWrapper,
   container?: HTMLElement
 ) {
+  const connections =
+    options.connections === null ? undefined : options.connections ?? [];
+
   const wrapperState = {
     globalAppRegistry: new AppRegistry(),
     localAppRegistry: new AppRegistry(),
@@ -274,7 +279,7 @@ function createWrapper(
     logger: createNoopLogger(),
     connectionStorage:
       options.connectionStorage ??
-      (new InMemoryConnectionStorage(options.connections) as ConnectionStorage),
+      (new InMemoryConnectionStorage(connections) as ConnectionStorage),
     connectionsStore: {
       getState: undefined as unknown as () => State,
       actions: {} as ReturnType<typeof useConnectionActions>,
@@ -359,7 +364,7 @@ function createWrapper(
                         onAutoconnectInfoRequest={
                           options.onAutoconnectInfoRequest
                         }
-                        preloadStorageConnectionInfos={options.connections}
+                        preloadStorageConnectionInfos={connections}
                       >
                         <StoreGetter>
                           <TestEnvCurrentConnectionContext.Provider

packages/compass-connections/src/index.tsx

@@ -85,17 +85,20 @@ const CompassConnectionsPlugin = registerHadronPlugin(
       { logger, preferences, connectionStorage, track, globalAppRegistry },
       { addCleanup, cleanup }
     ) {
-      const store = configureStore(initialProps.preloadStorageConnectionInfos, {
-        logger,
-        preferences,
-        connectionStorage,
-        track,
-        getExtraConnectionData: initialProps.onExtraConnectionDataRequest,
-        appName: initialProps.appName,
-        connectFn: initialProps.connectFn,
-        globalAppRegistry,
-        onFailToLoadConnections: initialProps.onFailToLoadConnections,
-      });
+      const store = configureStore(
+        initialProps.preloadStorageConnectionInfos ?? null,
+        {
+          logger,
+          preferences,
+          connectionStorage,
+          track,
+          getExtraConnectionData: initialProps.onExtraConnectionDataRequest,
+          appName: initialProps.appName,
+          connectFn: initialProps.connectFn,
+          globalAppRegistry,
+          onFailToLoadConnections: initialProps.onFailToLoadConnections,
+        }
+      );
 
       setTimeout(() => {
         void store.dispatch(loadConnections());

packages/compass-connections/src/provider.ts

@@ -62,6 +62,7 @@ export {
   useConnectionsList,
   useConnectionsListRef,
   connectionsLocator,
+  useConnectionsListLoadingStatus,
 } from './stores/store-context';
 
 export type { ConnectionsService } from './stores/store-context';

packages/compass-connections/src/stores/connections-store-redux.spec.tsx

@@ -67,6 +67,7 @@ describe('CompassConnections store', function () {
         .rejects(new Error('loadAll failed'));
 
       renderCompassConnections({
+        connections: null,
         connectionStorage,
         onFailToLoadConnections: onFailToLoadConnectionsSpy,
       });

packages/compass-connections/src/stores/connections-store-redux.ts

@@ -469,8 +469,17 @@ const INITIAL_STATE: State = {
 };
 
 export function getInitialConnectionsStateForConnectionInfos(
-  connectionInfos: ConnectionInfo[] = []
+  connectionInfos: ConnectionInfo[] | null
 ): State['connections'] {
+  if (!connectionInfos) {
+    // Keep initial state if we're not preloading any connections
+    return {
+      byId: {},
+      ids: [],
+      status: 'initial',
+      error: null,
+    };
+  }
   const byId = Object.fromEntries<ConnectionState>(
     connectionInfos.map((info) => {
       return [info.id, createDefaultConnectionState(info)];
@@ -479,8 +488,7 @@ export function getInitialConnectionsStateForConnectionInfos(
   return {
     byId,
     ids: getSortedIdsForConnections(Object.values(byId)),
-    // Keep initial state if we're not preloading any connections
-    status: connectionInfos.length > 0 ? 'ready' : 'initial',
+    status: 'ready',
     error: null,
   };
 }
@@ -2126,7 +2134,7 @@ export const openSettingsModal = (
 };
 
 export function configureStore(
-  preloadConnectionInfos: ConnectionInfo[] = [],
+  preloadConnectionInfos: ConnectionInfo[] | null,
   thunkArg: ThunkExtraArg
 ) {
   return createStore(

packages/compass-connections/src/stores/store-context.tsx

@@ -364,3 +364,14 @@ export function useConnectionsColorList(): {
     });
   }, isEqual);
 }
+
+export function useConnectionsListLoadingStatus() {
+  return useSelector((state) => {
+    const status = state.connections.status;
+    return {
+      status,
+      error: state.connections.error?.message ?? null,
+      isInitialLoad: status === 'initial' || status === 'loading',
+    };
+  }, isEqual);
+}

packages/compass-sidebar/src/components/connections-filter-popover.tsx

@@ -43,13 +43,15 @@ type ConnectionsFilterPopoverProps = PropsWithChildren<{
   onFilterChange(
     updater: (filter: ConnectionsFilter) => ConnectionsFilter
   ): void;
+  disabled?: boolean;
 }>;
 
 export default function ConnectionsFilterPopover({
   open,
   setOpen,
   filter,
   onFilterChange,
+  disabled = false,
 }: ConnectionsFilterPopoverProps) {
   const onExcludeInactiveChange = useCallback(
     (excludeInactive: boolean) => {
@@ -103,6 +105,7 @@ export default function ConnectionsFilterPopover({
               active={open}
               aria-label="Filter connections"
               ref={ref}
+              disabled={disabled}
             >
               <Icon glyph="Filter" />
               {isActivated && (

packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx

@@ -18,6 +18,8 @@ import {
   Button,
   Icon,
   ButtonVariant,
+  cx,
+  Placeholder,
 } from '@mongodb-js/compass-components';
 import { ConnectionsNavigationTree } from '@mongodb-js/compass-connections-navigation';
 import type { MapDispatchToProps, MapStateToProps } from 'react-redux';
@@ -38,6 +40,7 @@ import type { RootState, SidebarThunkAction } from '../../modules';
 import {
   type useConnectionsWithStatus,
   ConnectionStatus,
+  useConnectionsListLoadingStatus,
 } from '@mongodb-js/compass-connections/provider';
 import {
   useOpenWorkspace,
@@ -89,6 +92,10 @@ const connectionCountStyles = css({
   marginLeft: spacing[100],
 });
 
+const connectionCountDisabledStyles = css({
+  opacity: 0.6,
+});
+
 const noDeploymentStyles = css({
   paddingLeft: spacing[400],
   paddingRight: spacing[400],
@@ -305,7 +312,7 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
       }
 
       return actions;
-    }, [supportsConnectionImportExport]);
+    }, [supportsConnectionImportExport, enableCreatingNewConnections]);
 
   const onConnectionItemAction = useCallback(
     (
@@ -491,6 +498,17 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
 
   const isAtlasConnectionStorage = useContext(AtlasClusterConnectionsOnly);
 
+  const { isInitialLoad: isInitialConnectionsLoad } =
+    useConnectionsListLoadingStatus();
+
+  const connectionsCount = isInitialConnectionsLoad ? (
+    <span className={cx(connectionCountStyles, connectionCountDisabledStyles)}>
+      (…)
+    </span>
+  ) : connections.length !== 0 ? (
+    <span className={connectionCountStyles}>({connections.length})</span>
+  ) : undefined;
+
   return (
     <div className={connectionsContainerStyles}>
       <div
@@ -499,11 +517,7 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
       >
         <Subtitle className={connectionListHeaderTitleStyles}>
           {isAtlasConnectionStorage ? 'Clusters' : 'Connections'}
-          {connections.length !== 0 && (
-            <span className={connectionCountStyles}>
-              ({connections.length})
-            </span>
-          )}
+          {connectionsCount}
         </Subtitle>
         <ItemActionControls<ConnectionListTitleActions>
           iconSize="xsmall"
@@ -514,27 +528,25 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
           collapseAfter={2}
         ></ItemActionControls>
       </div>
-      {connections.length > 0 && (
-        <>
-          <NavigationItemsFilter
-            placeholder={
-              isAtlasConnectionStorage
-                ? 'Search clusters'
-                : 'Search connections'
-            }
-            filter={filter}
-            onFilterChange={onFilterChange}
-          />
-          <ConnectionsNavigationTree
-            connections={filtered || connections}
-            activeWorkspace={activeWorkspace}
-            onItemAction={onItemAction}
-            onItemExpand={onItemExpand}
-            expanded={expanded}
-          />
-        </>
-      )}
-      {connections.length === 0 && (
+      <NavigationItemsFilter
+        placeholder={
+          isAtlasConnectionStorage ? 'Search clusters' : 'Search connections'
+        }
+        filter={filter}
+        onFilterChange={onFilterChange}
+        disabled={isInitialConnectionsLoad || connections.length === 0}
+      />
+      {isInitialConnectionsLoad ? (
+        <ConnectionsPlaceholder></ConnectionsPlaceholder>
+      ) : connections.length > 0 ? (
+        <ConnectionsNavigationTree
+          connections={filtered || connections}
+          activeWorkspace={activeWorkspace}
+          onItemAction={onItemAction}
+          onItemExpand={onItemExpand}
+          expanded={expanded}
+        />
+      ) : connections.length === 0 ? (
         <div className={noDeploymentStyles}>
           <Body data-testid="no-deployments-text">
             You have not connected to any deployments.
@@ -550,11 +562,37 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
             </Button>
           )}
         </div>
-      )}
+      ) : null}
     </div>
   );
 };
 
+const placeholderListStyles = css({
+  display: 'grid',
+  gridTemplateColumns: '1fr',
+  // placeholder height that visually matches font size (16px) + vertical
+  // spacing (12px) to align it visually with real items
+  gridAutoRows: spacing[400] + spacing[300],
+  alignItems: 'center',
+  // navigation list padding + "empty" caret icon space (4px) to align it
+  // visually with real items
+  paddingLeft: spacing[400] + spacing[100],
+  paddingRight: spacing[400],
+});
+
+function ConnectionsPlaceholder() {
+  return (
+    <div
+      data-testid="connections-placeholder"
+      className={placeholderListStyles}
+    >
+      {Array.from({ length: 3 }, (_, index) => (
+        <Placeholder key={index} height={spacing[400]}></Placeholder>
+      ))}
+    </div>
+  );
+}
+
 const onRefreshDatabases = (connectionId: string): SidebarThunkAction<void> => {
   return (_dispatch, getState, { globalAppRegistry }) => {
     globalAppRegistry.emit('refresh-databases', { connectionId });

packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx

@@ -94,7 +94,7 @@ describe('Multiple Connections Sidebar Component', function () {
 
   function doRender(
     activeWorkspace: WorkspaceTab | null = null,
-    connections: ConnectionInfo[] = [savedFavoriteConnection],
+    connections: ConnectionInfo[] | null = [savedFavoriteConnection],
     atlasClusterConnectionsOnly: boolean | undefined = undefined
   ) {
     workspace = sinon.spy({
@@ -235,6 +235,11 @@ describe('Multiple Connections Sidebar Component', function () {
   });
 
   describe('connections list', function () {
+    it('should display a loading state while connections are not loaded yet', function () {
+      doRender(null, null);
+      expect(screen.getByTestId('connections-placeholder')).to.be.visible;
+    });
+
     context('when there are no connections', function () {
       it('should display an empty state with a CTA to add new connection', function () {
         doRender(undefined, []);

packages/compass-sidebar/src/components/navigation-items-filter.tsx

@@ -30,6 +30,7 @@ export default function NavigationItemsFilter({
   title = 'Search',
   filter,
   onFilterChange,
+  disabled = false,
 }: {
   placeholder?: string;
   ariaLabel?: string;
@@ -38,6 +39,7 @@ export default function NavigationItemsFilter({
   onFilterChange(
     updater: (filter: ConnectionsFilter) => ConnectionsFilter
   ): void;
+  disabled?: boolean;
 }): React.ReactElement {
   const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
     (event) => {
@@ -66,12 +68,14 @@ export default function NavigationItemsFilter({
         title={title}
         onChange={onChange}
         className={textInputStyles}
+        disabled={disabled}
       />
       <ConnectionsFilterPopover
         open={isPopoverOpen}
         setOpen={setPopoverOpen}
         filter={filter}
         onFilterChange={onFilterChange}
+        disabled={disabled}
       />
     </form>
   );