feat(ui): Add loading indicator to page filters wrapper (#72562)

static/app/components/organizations/pageFilters/container.tsx

@@ -10,6 +10,7 @@ import {
   updateProjects,
 } from 'sentry/actionCreators/pageFilters';
 import * as Layout from 'sentry/components/layouts/thirds';
+import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {SIDEBAR_NAVIGATION_SOURCE} from 'sentry/components/sidebar/utils';
 import {DEFAULT_STATS_PERIOD} from 'sentry/constants';
 import {useLocation} from 'sentry/utils/useLocation';
@@ -185,8 +186,14 @@ function PageFiltersContainer({
   }, [location.query]);
 
   // Wait for global selection to be ready before rendering children
+  // TODO: Not waiting for projects to be ready but initializing the correct page filters
+  // would speed up orgs with tons of projects
   if (!isReady) {
-    return <Layout.Page withPadding />;
+    return (
+      <Layout.Page withPadding>
+        <LoadingIndicator />
+      </Layout.Page>
+    );
   }
 
   return <Fragment>{children}</Fragment>;

static/app/views/dashboards/orgDashboards.spec.tsx

@@ -4,6 +4,7 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 import {initializeOrg} from 'sentry-test/initializeOrg';
 import {render, screen, waitFor} from 'sentry-test/reactTestingLibrary';
 
+import ProjectsStore from 'sentry/stores/projectsStore';
 import {browserHistory} from 'sentry/utils/browserHistory';
 import DashboardDetail from 'sentry/views/dashboards/detail';
 import OrgDashboards from 'sentry/views/dashboards/orgDashboards';
@@ -43,6 +44,7 @@ describe('OrgDashboards', () => {
       url: '/organizations/org-slug/dashboards/',
       body: [mockDashboard],
     });
+    ProjectsStore.loadInitialData(initialData.projects);
   });
 
   afterEach(() => {