Revert "ref(ui): Extract LoadingTriangle from LoadingIndicator (#30779)" (#31111)

This reverts commit 414d76cacb6cf7121360d9a79352dff7892d275e.

docs-ui/stories/components/loadingIndicator.stories.js

@@ -1,5 +1,4 @@
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import LoadingTriangle from 'sentry/components/loadingTriangle';
 
 export default {
   title: 'Components/Loading Indicators',
@@ -16,11 +15,9 @@ export const All = () => (
       Mini
       <LoadingIndicator mini />
     </div>
-    <div>
+    <div style={{position: 'relative'}}>
       Triangle
-      <div style={{position: 'relative'}}>
-        <LoadingTriangle />
-      </div>
+      <LoadingIndicator triangle />
     </div>
   </div>
 );
@@ -51,7 +48,7 @@ Mini.parameters = {
 
 export const Triangle = () => (
   <div style={{paddingBottom: 300}}>
-    <LoadingTriangle>Loading message</LoadingTriangle>
+    <LoadingIndicator triangle>Loading message</LoadingIndicator>
   </div>
 );
 

static/app/components/loadingIndicator.tsx

@@ -2,10 +2,13 @@ import * as React from 'react';
 import {withProfiler} from '@sentry/react';
 import classNames from 'classnames';
 
+import sentryLoader from 'sentry-images/sentry-loader.svg';
+
 type Props = {
   overlay?: boolean;
   dark?: boolean;
   mini?: boolean;
+  triangle?: boolean;
   relative?: boolean;
   hideMessage?: boolean;
   hideSpinner?: boolean;
@@ -15,10 +18,15 @@ type Props = {
   children?: React.ReactNode;
 };
 
+function renderLogoSpinner() {
+  return <img src={sentryLoader} />;
+}
+
 function LoadingIndicator(props: Props) {
   const {
     hideMessage,
     mini,
+    triangle,
     overlay,
     dark,
     children,
@@ -33,6 +41,7 @@ function LoadingIndicator(props: Props) {
     dark,
     loading: true,
     mini,
+    triangle,
   });
 
   const loadingCx = classNames({
@@ -50,7 +59,11 @@ function LoadingIndicator(props: Props) {
 
   return (
     <div className={cx} style={style} data-test-id="loading-indicator">
-      {!hideSpinner && <div className={loadingCx} style={loadingStyle} />}
+      {!hideSpinner && (
+        <div className={loadingCx} style={loadingStyle}>
+          {triangle && renderLogoSpinner()}
+        </div>
+      )}
       {!hideMessage && <div className="loading-message">{children}</div>}
     </div>
   );

static/app/components/loadingTriangle.tsx

@@ -1,44 +0,0 @@
-import styled from '@emotion/styled';
-
-import sentryLoader from 'sentry-images/sentry-loader.svg';
-
-import space from 'sentry/styles/space';
-
-type Props = {
-  children?: React.ReactNode;
-};
-
-function LoadingTriangle({children}: Props) {
-  return (
-    <LoadingTriangleWrapper data-test-id="loading-indicator">
-      <CircleBackground>
-        <img src={sentryLoader} />
-      </CircleBackground>
-      {children && <div>{children}</div>}
-    </LoadingTriangleWrapper>
-  );
-}
-
-const LoadingTriangleWrapper = styled('div')`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 500px;
-  transform: translate(-50%, -50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: ${space(3)};
-`;
-
-const CircleBackground = styled('div')`
-  height: 150px;
-  width: 150px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: ${p => p.theme.white};
-  border-radius: 50%;
-`;
-
-export default LoadingTriangle;

static/app/views/organizationContext.tsx

@@ -10,7 +10,7 @@ import ProjectActions from 'sentry/actions/projectActions';
 import {Client} from 'sentry/api';
 import Alert from 'sentry/components/alert';
 import LoadingError from 'sentry/components/loadingError';
-import LoadingTriangle from 'sentry/components/loadingTriangle';
+import LoadingIndicator from 'sentry/components/loadingIndicator';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import Sidebar from 'sentry/components/sidebar';
 import {ORGANIZATION_FETCH_ERROR_TYPES} from 'sentry/constants';
@@ -339,7 +339,9 @@ class OrganizationContextContainer extends React.Component<Props, State> {
   render() {
     if (this.isLoading()) {
       return (
-        <LoadingTriangle>{t('Loading data for your organization.')}</LoadingTriangle>
+        <LoadingIndicator triangle>
+          {t('Loading data for your organization.')}
+        </LoadingIndicator>
       );
     }
 

tests/js/spec/views/organizationContext.spec.jsx

@@ -240,7 +240,7 @@ describe('OrganizationContext', function () {
       organizations: [],
     });
 
-    expect(wrapper.find('LoadingTriangle')).toHaveLength(1);
+    expect(wrapper.find('LoadingIndicator')).toHaveLength(1);
 
     wrapper.setProps({
       organizationsLoading: false,
@@ -253,7 +253,7 @@ describe('OrganizationContext', function () {
     await tick(); // action to start fetch org
     await tick(); // action after successfully fetching org
     wrapper.update();
-    expect(wrapper.find('LoadingTriangle')).toHaveLength(0);
+    expect(wrapper.find('LoadingIndicator')).toHaveLength(0);
 
     expect(getOrgMock).toHaveBeenCalled();
     expect(getProjectsMock).toHaveBeenCalled();
@@ -285,7 +285,7 @@ describe('OrganizationContext', function () {
     // await resolving api, and updating component
     await tick();
     wrapper.update();
-    expect(wrapper.find('LoadingTriangle')).toHaveLength(0);
+    expect(wrapper.find('LoadingIndicator')).toHaveLength(0);
     expect(getOrgMock).toHaveBeenCalledTimes(1);
 
     // Simulate OrganizationsStore being loaded *after* `OrganizationContext` finishes
@@ -314,7 +314,7 @@ describe('OrganizationContext', function () {
     // await resolving api, and updating component
     await tick();
     wrapper.update();
-    expect(wrapper.find('LoadingTriangle')).toHaveLength(0);
+    expect(wrapper.find('LoadingIndicator')).toHaveLength(0);
     expect(getOrgMock).toHaveBeenCalledTimes(1);
 
     // Simulate OrganizationsStore being loaded *after* `OrganizationContext` finishes