fix: Show loading indicator in recents popover button (opensearch-pro…

…ject#8430)

Signed-off-by: Viraj Sanghvi <[email protected]>

src/core/public/chrome/ui/header/header.tsx

@@ -491,6 +491,7 @@ export function Header({
         navigateToUrl={application.navigateToUrl}
         renderBreadcrumbs={renderBreadcrumbs(true, true)}
         buttonSize={useApplicationHeader ? 's' : 'xs'}
+        loadingCount$={observables.loadingCount$}
       />
     </EuiHeaderSectionItem>
   );

src/core/public/chrome/ui/header/recent_items.scss

@@ -7,4 +7,13 @@
   .primaryApplicationHeader & {
     margin-top: $euiSizeXS;
   }
+
+  // Make the spinner the same size as an xs icon button
+  &.headerRecentItemsButton--loadingIndicator {
+    width: $euiButtonHeightXSmall;
+
+    & > span {
+      padding: 0;
+    }
+  }
 }

src/core/public/chrome/ui/header/recent_items.test.tsx

@@ -53,6 +53,7 @@ const defaultMockProps = {
   basePath: httpServiceMock.createStartContract().basePath,
   http: httpServiceMock.createSetupContract(),
   renderBreadcrumbs: <></>,
+  loadingCount$: new BehaviorSubject(0),
 };
 
 jest.spyOn(defaultMockProps.http, 'get').mockImplementation(
@@ -150,4 +151,11 @@ describe('Recent items', () => {
     fireEvent.click(preferencesButton);
     expect(screen.getByTestId('preferencesSettingPopover')).toBeInTheDocument();
   });
+
+  it('should show loading indicator if loading count > 0', () => {
+    const { baseElement } = render(
+      <RecentItems {...defaultMockProps} loadingCount$={new BehaviorSubject(1)} />
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
 });