docs: Document our loadingTriangle component

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

@@ -6,6 +6,7 @@ import LoadingIndicator from 'sentry/components/loadingIndicator';
 import BufferingOverlay from 'sentry/components/replays/player/bufferingOverlay';
 import FastForwardBadge from 'sentry/components/replays/player/fastForwardBadge';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
+import SizingWindow from 'sentry/components/stories/sizingWindow';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import useOrganization from 'sentry/utils/useOrganization';
 
@@ -113,46 +114,20 @@ function BasePlayerRoot({className, isPreview = false}: Props) {
   }, [windowDimensions, videoDimensions]);
 
   return (
-    <SizingWindow ref={windowEl} className="sentry-block">
+    <FixedSizingWindow 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>
+    </FixedSizingWindow>
   );
 }
 
-// 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 FixedSizingWindow = styled(SizingWindow)`
+  border: none;
+  resize: none;
+  padding: 0;
 `;
 
 const PositionedFastForward = styled(FastForwardBadge)`

static/app/components/stories/sizingWindow.tsx

@@ -0,0 +1,37 @@
+import styled from '@emotion/styled';
+
+import {space} from 'sentry/styles/space';
+
+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
+    );
+
+  border: 1px solid ${p => p.theme.yellow400};
+  border-radius: ${p => p.theme.borderRadius};
+
+  resize: both;
+  padding: ${space(2)};
+`;
+
+export default SizingWindow;