ref(ux): reuse django rendered loader for org

static/app/views/organizationContainer.tsx

@@ -1,21 +1,35 @@
-import styled from '@emotion/styled';
 import {useProfiler} from '@sentry/react';
 
+import {Container} from '@sentry/scraps/layout';
+
 import {Alert} from 'sentry/components/core/alert';
 import LoadingError from 'sentry/components/loadingError';
-import LoadingTriangle from 'sentry/components/loadingTriangle';
-import {ORGANIZATION_FETCH_ERROR_TYPES} from 'sentry/constants';
+import {ORGANIZATION_FETCH_ERROR_TYPES, ROOT_ELEMENT} from 'sentry/constants';
 import {t} from 'sentry/locale';
 import OrganizationStore from 'sentry/stores/organizationStore';
 import {useLegacyStore} from 'sentry/stores/useLegacyStore';
-import {space} from 'sentry/styles/space';
 
 function OrganizationLoadingIndicator() {
   /* Track how long this component is rendered for. */
   useProfiler('OrganizationLoadingIndicator', {
     hasRenderSpan: true,
   });
-  return <LoadingTriangle>{t('Loading data for your organization.')}</LoadingTriangle>;
+
+  /**
+   * This is the initial loader React will render as the app bootstraps.
+   * Rather than rendering a loader component, we can reuse the existing DOM
+   * provided by the server-rendered Django view!
+   *
+   * This ensures there are no layout shifts as the app initially boots up
+   * because the DOM is exactly the same and React doesn't have to reconcile
+   * the fallback state.
+   */
+  const root = document.getElementById(ROOT_ELEMENT);
+  // There is no scenario in which this component is rendering,
+  // but the root element where the app is mounted doesn't exist
+  const ssrLoader = root!.innerHTML;
+
+  return <div dangerouslySetInnerHTML={{__html: ssrLoader}} />;
 }
 
 interface Props {
@@ -70,14 +84,10 @@ function OrganizationContainer({children}: Props) {
         <LoadingError />
       );
 
-    return <ErrorWrapper>{errorBody}</ErrorWrapper>;
+    return <Container padding="2xl">{errorBody}</Container>;
   }
 
   return children;
 }
 
-const ErrorWrapper = styled('div')`
-  padding: ${space(3)};
-`;
-
 export default OrganizationContainer;