docs: Document our loadingTriangle component

static/app/components/container/negativeSpaceContainer.stories.tsx

@@ -0,0 +1,33 @@
+import {Fragment} from 'react';
+
+import backgroundLighthouse from 'sentry-images/spot/background-lighthouse.svg';
+import onboardingFrameworkSelectionJavascript from 'sentry-images/spot/onboarding-framework-selection-javascript.svg';
+
+import NegativeSpaceContainer from 'sentry/components/container/negativeSpaceContainer';
+import storyBook from 'sentry/stories/storyBook';
+
+export default storyBook('NegativeSpaceContainer', story => {
+  story('Empty', () => (
+    <Fragment>
+      <p>
+        A <var>NegativeSpaceContainer</var> is a container that will preserve the aspect
+        ratio of whatever is inside it. It's a flex element, so the children are free to
+        expand/contract depending on whether things like <kbd>flex-grow: 1</kbd> are set.
+      </p>
+      <p>Here's one with nothing inside it:</p>
+      <NegativeSpaceContainer style={{width: '100%', height: '100px'}} />
+    </Fragment>
+  ));
+
+  story('Centered in a fixed space', () => (
+    <NegativeSpaceContainer style={{width: '600px', height: '200px'}}>
+      <img src={backgroundLighthouse} />
+    </NegativeSpaceContainer>
+  ));
+
+  story('Transparent Content', () => (
+    <NegativeSpaceContainer>
+      <img src={onboardingFrameworkSelectionJavascript} />
+    </NegativeSpaceContainer>
+  ));
+});

static/app/components/container/negativeSpaceContainer.tsx

@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+
+const NegativeSpaceContainer = styled('div')`
+  width: 100%;
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+
+  background-color: ${p => p.theme.backgroundSecondary};
+  background-image: repeating-linear-gradient(
+      -145deg,
+      transparent,
+      transparent 8px,
+      ${p => p.theme.backgroundSecondary} 8px,
+      ${p => p.theme.backgroundSecondary} 11px
+    ),
+    repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 15px,
+      ${p => p.theme.gray100} 15px,
+      ${p => p.theme.gray100} 16px
+    );
+`;
+
+export default NegativeSpaceContainer;

static/app/components/loadingTriangle.stories.tsx

@@ -0,0 +1,17 @@
+import LoadingTriangle from 'sentry/components/loadingTriangle';
+import SizingWindow from 'sentry/components/stories/sizingWindow';
+import storyBook from 'sentry/stories/storyBook';
+
+export default storyBook('LogoSentry', story => {
+  story('Default', () => (
+    <SizingWindow style={{height: '150px'}}>
+      <LoadingTriangle />
+    </SizingWindow>
+  ));
+
+  story('With children', () => (
+    <SizingWindow style={{height: '190px'}}>
+      <LoadingTriangle>This will take a while...</LoadingTriangle>
+    </SizingWindow>
+  ));
+});

static/app/components/replays/replayPlayer.tsx

@@ -2,6 +2,7 @@ import {useCallback, useEffect, useRef, useState} from 'react';
 import styled from '@emotion/styled';
 import {useResizeObserver} from '@react-aria/utils';
 
+import NegativeSpaceContainer from 'sentry/components/container/negativeSpaceContainer';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import BufferingOverlay from 'sentry/components/replays/player/bufferingOverlay';
 import FastForwardBadge from 'sentry/components/replays/player/fastForwardBadge';
@@ -113,48 +114,16 @@ function BasePlayerRoot({className, isPreview = false}: Props) {
   }, [windowDimensions, videoDimensions]);
 
   return (
-    <SizingWindow ref={windowEl} className="sentry-block">
+    <NegativeSpaceContainer ref={windowEl} className="sentry-block">
       <div ref={viewEl} className={className} />
       {fastForwardSpeed ? <PositionedFastForward speed={fastForwardSpeed} /> : null}
       {isBuffering ? <PositionedBuffering /> : null}
       {isPreview ? null : <PlayerDOMAlert />}
       {isFetching ? <PositionedLoadingIndicator /> : null}
-    </SizingWindow>
+    </NegativeSpaceContainer>
   );
 }
 
-// Center the viewEl inside the windowEl.
-// This is useful when the window is inside a container that has large fixed
-// dimensions, like when in fullscreen mode.
-// If the container has a dimensions that can grow/shrink then it is
-// important to also set `overflow: hidden` on the container, so that the
-// SizingWindow can calculate size as things shrink.
-const SizingWindow = styled('div')`
-  width: 100%;
-  display: flex;
-  flex-grow: 1;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-
-  background-color: ${p => p.theme.backgroundSecondary};
-  background-image: repeating-linear-gradient(
-      -145deg,
-      transparent,
-      transparent 8px,
-      ${p => p.theme.backgroundSecondary} 8px,
-      ${p => p.theme.backgroundSecondary} 11px
-    ),
-    repeating-linear-gradient(
-      -45deg,
-      transparent,
-      transparent 15px,
-      ${p => p.theme.gray100} 15px,
-      ${p => p.theme.gray100} 16px
-    );
-`;
-
 const PositionedFastForward = styled(FastForwardBadge)`
   position: absolute;
   left: 0;

static/app/components/stories/sizingWindow.tsx

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+
+import NegativeSpaceContainer from 'sentry/components/container/negativeSpaceContainer';
+import {space} from 'sentry/styles/space';
+
+const SizingWindow = styled(NegativeSpaceContainer)`
+  border: 1px solid ${p => p.theme.yellow400};
+  border-radius: ${p => p.theme.borderRadius};
+
+  resize: both;
+  padding: ${space(2)};
+`;
+
+export default SizingWindow;