[Obs AI Assistant] Show loader to fix the flicker in KB settings tab (#212678)

Closes https://github.com/elastic/kibana/issues/208431

## Summary

With the updates in https://github.com/elastic/kibana/issues/203309, the
knowledge base settings tab flickers between the welcome message and the
installed state.. on reload, it first shows the "Install knowledge base
button" and then quickly switches to the ready component based on the KB
status.

This PR implements a loader until we receive the KB status, so that we
don't flicker between 2 components.

Before:


https://github.com/user-attachments/assets/5478c0fc-648e-4f15-af7f-9fc95e423553

After:


https://github.com/user-attachments/assets/7d5bc350-02fa-4a12-b7ee-1cd36ee93f0f


### Checklist

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

x-pack/solutions/observability/plugins/observability_ai_assistant_management/public/routes/components/knowledge_base_tab.test.tsx

@@ -52,6 +52,27 @@ describe('KnowledgeBaseTab', () => {
     });
   });
 
+  describe('when the knowledge base status is being fetched', () => {
+    beforeEach(() => {
+      useKnowledgeBaseMock.mockReturnValue({
+        status: {
+          value: {
+            ready: false,
+            enabled: true,
+          },
+          loading: true,
+        },
+        isInstalling: false,
+        install: jest.fn(),
+      });
+    });
+
+    it('should show a loader', () => {
+      const { getByTestId } = render(<KnowledgeBaseTab />);
+      expect(getByTestId('knowledgeBaseTabLoader')).toBeInTheDocument();
+    });
+  });
+
   describe('when the knowledge base is not installed', () => {
     beforeEach(() => {
       useKnowledgeBaseMock.mockReturnValue({

x-pack/solutions/observability/plugins/observability_ai_assistant_management/public/routes/components/knowledge_base_tab.tsx

@@ -21,6 +21,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
+  EuiLoadingSpinner,
   EuiPopover,
   EuiScreenReaderOnly,
   EuiSpacer,
@@ -222,6 +223,16 @@ export function KnowledgeBaseTab() {
     setQuery(e?.currentTarget.value || '');
   };
 
+  if (knowledgeBase.status.loading) {
+    return (
+      <EuiFlexGroup alignItems="center" direction="column">
+        <EuiFlexItem grow>
+          <EuiLoadingSpinner size="xl" data-test-subj="knowledgeBaseTabLoader" />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+
   return knowledgeBase.status.value?.ready ? (
     <>
       <EuiFlexGroup direction="column">