diff --git a/static/app/components/activity/item/avatar.tsx b/static/app/components/activity/item/avatar.tsx
index 925c7edda80e19..97864d32cddf8b 100644
--- a/static/app/components/activity/item/avatar.tsx
+++ b/static/app/components/activity/item/avatar.tsx
@@ -1,39 +1,31 @@
 import styled from '@emotion/styled';
 
 import {UserAvatar} from 'sentry/components/core/avatar/userAvatar';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconSentry} from 'sentry/icons';
 import type {AvatarUser} from 'sentry/types/user';
 
 type Props = {
   type: 'system' | 'user';
-  className?: string;
   size?: number;
   user?: AvatarUser;
 };
 
-export function ActivityAvatar({className, type, user, size = 38}: Props) {
+export function ActivityAvatar({type, user, size = 38}: Props) {
   if (user) {
-    return <UserAvatar user={user} size={size} className={className} />;
+    return <UserAvatar user={user} size={size} />;
   }
 
   if (type === 'system') {
     // Return Sentry avatar
     return (
-      <SystemAvatar className={className} size={size}>
+      <SystemAvatar size={size}>
         <StyledIconSentry size="md" />
       </SystemAvatar>
     );
   }
 
-  return (
-    <Placeholder
-      className={className}
-      width={`${size}px`}
-      height={`${size}px`}
-      shape="circle"
-    />
-  );
+  return <Placeholder width={`${size}px`} height={`${size}px`} shape="circle" />;
 }
 
 type SystemAvatarProps = {
diff --git a/static/app/components/activity/item/index.tsx b/static/app/components/activity/item/index.tsx
index 5ec931f83bf99f..4d6d22c0d639d4 100644
--- a/static/app/components/activity/item/index.tsx
+++ b/static/app/components/activity/item/index.tsx
@@ -1,6 +1,8 @@
 import styled from '@emotion/styled';
 import moment from 'moment-timezone';
 
+import {Container} from '@sentry/scraps/layout';
+
 import {DateTime} from 'sentry/components/dateTime';
 import TimeSince from 'sentry/components/timeSince';
 import {space} from 'sentry/styles/space';
@@ -87,7 +89,9 @@ function ActivityItem({
       {id && <a id={id} />}
 
       {author && (
-        <StyledActivityAvatar type={author.type} user={author.user} size={avatarSize} />
+        <Container marginRight="md">
+          <ActivityAvatar type={author.type} user={author.user} size={avatarSize} />
+        </Container>
       )}
 
       <StyledActivityBubble {...bubbleProps}>
@@ -139,10 +143,6 @@ const ActivityBody = styled('div')`
   ${textStyles}
 `;
 
-const StyledActivityAvatar = styled(ActivityAvatar)`
-  margin-right: ${space(1)};
-`;
-
 const StyledTimeSince = styled(TimeSince)`
   color: ${p => p.theme.subText};
 `;
diff --git a/static/app/components/assigneeBadge.tsx b/static/app/components/assigneeBadge.tsx
index aba0aeee306059..ec9731c35d28e6 100644
--- a/static/app/components/assigneeBadge.tsx
+++ b/static/app/components/assigneeBadge.tsx
@@ -7,7 +7,7 @@ import {Tag} from 'sentry/components/core/badge';
 import {ExternalLink} from 'sentry/components/core/link';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconChevron} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -80,7 +80,7 @@ export function AssigneeBadge({
     <Fragment>
       <Placeholder
         shape="circle"
-        testId="unassigned-avatar"
+        data-test-id="unassigned-avatar"
         width={`${AVATAR_SIZE}px`}
         height={`${AVATAR_SIZE}px`}
       />
diff --git a/static/app/components/badge/groupPriority.tsx b/static/app/components/badge/groupPriority.tsx
index 2ba3f417cb99f3..332413d71cd636 100644
--- a/static/app/components/badge/groupPriority.tsx
+++ b/static/app/components/badge/groupPriority.tsx
@@ -16,7 +16,7 @@ import type {MenuItemProps} from 'sentry/components/dropdownMenu';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import {DropdownMenuFooter} from 'sentry/components/dropdownMenu/footer';
 import HookOrDefault from 'sentry/components/hookOrDefault';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconChevron, IconClose} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/components/calendar/index.tsx b/static/app/components/calendar/index.tsx
index 3e9c804134338a..c00bc0a8f7f391 100644
--- a/static/app/components/calendar/index.tsx
+++ b/static/app/components/calendar/index.tsx
@@ -1,7 +1,7 @@
 import {lazy, Suspense} from 'react';
 
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 
 import type {DatePickerProps} from './datePicker';
 import type {DateRangePickerProps} from './dateRangePicker';
diff --git a/static/app/components/charts/chartWidgetLoader.tsx b/static/app/components/charts/chartWidgetLoader.tsx
index e314293a71c781..07726113de4a57 100644
--- a/static/app/components/charts/chartWidgetLoader.tsx
+++ b/static/app/components/charts/chartWidgetLoader.tsx
@@ -1,7 +1,8 @@
+import styled from '@emotion/styled';
 import {captureException} from '@sentry/core';
 import {useQuery} from '@tanstack/react-query';
 
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import type {ReactEchartsRef} from 'sentry/types/echarts';
 import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
@@ -228,8 +229,13 @@ export function ChartWidgetLoader(props: Props) {
     // eslint-disable-next-line no-console
     console.error(error);
     captureException(error);
-    return <Placeholder height="100%" error={t('Error loading widget')} />;
+    return <ErrorPlaceholder height="100%">{t('Error loading widget')}</ErrorPlaceholder>;
   }
 
   return <Component {...props} chartRef={props.ref} />;
 }
+
+const ErrorPlaceholder = styled(Placeholder)`
+  color: ${p => p.theme.red200};
+  background-color: ${p => p.theme.red100};
+`;
diff --git a/static/app/components/charts/groupStatusChart.tsx b/static/app/components/charts/groupStatusChart.tsx
index b072f859d28fea..ec222d4238a4c1 100644
--- a/static/app/components/charts/groupStatusChart.tsx
+++ b/static/app/components/charts/groupStatusChart.tsx
@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import MarkLine from 'sentry/components/charts/components/markLine';
 import MiniBarChart from 'sentry/components/charts/miniBarChart';
 import {LazyRender} from 'sentry/components/lazyRender';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import type {TimeseriesValue} from 'sentry/types/core';
 import type {Series} from 'sentry/types/echarts';
diff --git a/static/app/components/core/avatar/actorAvatar.tsx b/static/app/components/core/avatar/actorAvatar.tsx
index 1e0b00888b5f4f..02208257f98b43 100644
--- a/static/app/components/core/avatar/actorAvatar.tsx
+++ b/static/app/components/core/avatar/actorAvatar.tsx
@@ -2,7 +2,7 @@ import type React from 'react';
 import {useMemo} from 'react';
 import * as Sentry from '@sentry/react';
 
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import type {Actor} from 'sentry/types/core';
 import {useMembers} from 'sentry/utils/useMembers';
 import {useTeamsById} from 'sentry/utils/useTeamsById';
@@ -85,8 +85,7 @@ function AsyncMemberAvatar({ref, userActor, ...props}: AsyncMemberAvatarProps) {
   const member = members.find(u => u.id === userActor.id);
 
   if (fetching) {
-    const size = `${props.size}px`;
-    return <Placeholder shape="circle" width={size} height={size} />;
+    return <Placeholder width={`${props.size}px`} height={`${props.size}px`} />;
   }
 
   if (!member) {
diff --git a/static/app/components/core/avatar/avatar.mdx b/static/app/components/core/avatar/avatar.mdx
index fd46c659bb17b9..43092ad3545336 100644
--- a/static/app/components/core/avatar/avatar.mdx
+++ b/static/app/components/core/avatar/avatar.mdx
@@ -9,7 +9,7 @@ resources:
 import {Fragment, useEffect} from 'react';
 
 import {Flex} from 'sentry/components/core/layout';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import * as Storybook from 'sentry/stories';
 import {useMembers} from 'sentry/utils/useMembers';
 import {useUserTeams} from 'sentry/utils/useUserTeams';
diff --git a/static/app/components/core/layout/styles.tsx b/static/app/components/core/layout/styles.tsx
index 26746250468c9d..fe07ae13860009 100644
--- a/static/app/components/core/layout/styles.tsx
+++ b/static/app/components/core/layout/styles.tsx
@@ -107,6 +107,10 @@ function resolveRadius(sizeComponent: RadiusSize | undefined, theme: Theme) {
     return undefined;
   }
 
+  if (sizeComponent === 'full') {
+    return '100%';
+  }
+
   return isChonkTheme(theme) ? theme.radius[sizeComponent] : theme.borderRadius;
 }
 
diff --git a/static/app/components/eventOrGroupExtraDetails.tsx b/static/app/components/eventOrGroupExtraDetails.tsx
index 704740608fb6a4..9270269f77458b 100644
--- a/static/app/components/eventOrGroupExtraDetails.tsx
+++ b/static/app/components/eventOrGroupExtraDetails.tsx
@@ -14,7 +14,7 @@ import UnhandledTag from 'sentry/components/group/inboxBadges/unhandledTag';
 import IssueReplayCount from 'sentry/components/group/issueReplayCount';
 import IssueSeerBadge from 'sentry/components/group/issueSeerBadge';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconChat} from 'sentry/icons';
 import {tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/components/events/eventStatisticalDetector/eventDifferentialFlamegraph.tsx b/static/app/components/events/eventStatisticalDetector/eventDifferentialFlamegraph.tsx
index 00bc1092b0c3c3..bf8a5f1b21dcb9 100644
--- a/static/app/components/events/eventStatisticalDetector/eventDifferentialFlamegraph.tsx
+++ b/static/app/components/events/eventStatisticalDetector/eventDifferentialFlamegraph.tsx
@@ -3,12 +3,14 @@ import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
 import type {LocationDescriptor} from 'history';
 
+import {Container} from '@sentry/scraps/layout';
+
 import {Button} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {Link} from 'sentry/components/core/link';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import Panel from 'sentry/components/panels/panel';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {DifferentialFlamegraph} from 'sentry/components/profiling/flamegraph/differentialFlamegraph';
 import {DifferentialFlamegraphToolbar} from 'sentry/components/profiling/flamegraph/flamegraphToolbar/differentialFlamegraphToolbar';
 import {IconChevron} from 'sentry/icons/iconChevron';
@@ -342,19 +344,15 @@ function DifferentialFlamegraphChangedFunctions(
             return (
               <DifferentialFlamegraphChangedFunctionContainer key={idx}>
                 <div>
-                  <Placeholder
-                    height="16px"
-                    width="66%"
-                    style={MARGIN_BOTTOM_PLACEHOLDER_STYLES}
-                  />
+                  <Container marginBottom="xs">
+                    {p => <Placeholder height="16px" width="66%" {...p} />}
+                  </Container>
                   <Placeholder height="16px" width="48%" />
                 </div>
                 <DifferentialFlamegraphChangedFunctionStats>
-                  <Placeholder
-                    height="16px"
-                    width="32px"
-                    style={RIGHT_ALIGN_PLACEHOLDER_STYLES}
-                  />
+                  <Container marginBottom="xs" marginLeft="auto" justifySelf="flex-end">
+                    {p => <Placeholder height="16px" width="32px" {...p} />}
+                  </Container>
                   <Placeholder height="16px" width="56px" />
                 </DifferentialFlamegraphChangedFunctionStats>
               </DifferentialFlamegraphChangedFunctionContainer>
@@ -436,16 +434,6 @@ const DifferentialFlamegraphFunctionColorIndicator = styled('div')`
   background-color: ${p => p.theme.green300};
 `;
 
-const RIGHT_ALIGN_PLACEHOLDER_STYLES: React.CSSProperties = {
-  marginBottom: '4px',
-  marginLeft: 'auto',
-  justifySelf: 'flex-end',
-};
-
-const MARGIN_BOTTOM_PLACEHOLDER_STYLES: React.CSSProperties = {
-  marginBottom: '4px',
-};
-
 const DifferentialFlamegraphChangedFunctionStats = styled('div')`
   text-align: right;
   flex-shrink: 0;
diff --git a/static/app/components/events/groupingInfo/groupingSummary.tsx b/static/app/components/events/groupingInfo/groupingSummary.tsx
index 3e63cf01c400ba..5f54b49ddd22b0 100644
--- a/static/app/components/events/groupingInfo/groupingSummary.tsx
+++ b/static/app/components/events/groupingInfo/groupingSummary.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 
+import {Container} from '@sentry/scraps/layout';
+
 import {useEventGroupingInfo} from 'sentry/components/events/groupingInfo/useEventGroupingInfo';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
@@ -34,11 +36,9 @@ export function GroupInfoSummary({
 
   if (isPending && !hasPerformanceGrouping) {
     return (
-      <Placeholder
-        height="20px"
-        width="unset"
-        style={{flexGrow: 1, marginBottom: '20px'}}
-      />
+      <Container marginBottom="xl">
+        {props => <Placeholder height="20px" width="unset" flexGrow={1} {...props} />}
+      </Container>
     );
   }
 
diff --git a/static/app/components/events/interfaces/crashContent/exception/rawContent.tsx b/static/app/components/events/interfaces/crashContent/exception/rawContent.tsx
index 0adbafe13130ff..752e1ad4286093 100644
--- a/static/app/components/events/interfaces/crashContent/exception/rawContent.tsx
+++ b/static/app/components/events/interfaces/crashContent/exception/rawContent.tsx
@@ -3,7 +3,7 @@ import {Fragment} from 'react';
 import ClippedBox from 'sentry/components/clippedBox';
 import rawStacktraceContent from 'sentry/components/events/interfaces/crashContent/stackTrace/rawContent';
 import LoadingError from 'sentry/components/loadingError';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import type {Event, ExceptionType} from 'sentry/types/event';
 import type {PlatformKey, Project} from 'sentry/types/project';
 import {defined} from 'sentry/utils';
diff --git a/static/app/components/events/interfaces/frame/stacktraceLink.tsx b/static/app/components/events/interfaces/frame/stacktraceLink.tsx
index 0ce80b308b320e..3effd695dfa253 100644
--- a/static/app/components/events/interfaces/frame/stacktraceLink.tsx
+++ b/static/app/components/events/interfaces/frame/stacktraceLink.tsx
@@ -10,7 +10,7 @@ import {Text} from 'sentry/components/core/text';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import {useStacktraceCoverage} from 'sentry/components/events/interfaces/frame/useStacktraceCoverage';
 import {hasFileExtension} from 'sentry/components/events/interfaces/frame/utils';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconCopy, IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Event, Frame} from 'sentry/types/event';
diff --git a/static/app/components/feedback/feedbackItem/crashReportSection.tsx b/static/app/components/feedback/feedbackItem/crashReportSection.tsx
index 738127c613835b..cb7b25c787f6ca 100644
--- a/static/app/components/feedback/feedbackItem/crashReportSection.tsx
+++ b/static/app/components/feedback/feedbackItem/crashReportSection.tsx
@@ -5,7 +5,7 @@ import {Alert} from 'sentry/components/core/alert';
 import EventOrGroupExtraDetails from 'sentry/components/eventOrGroupExtraDetails';
 import EventOrGroupHeader from 'sentry/components/eventOrGroupHeader';
 import useFetchCrashReport from 'sentry/components/feedback/feedbackItem/useFetchCrashReport';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
diff --git a/static/app/components/feedback/feedbackItem/feedbackItemLoader.tsx b/static/app/components/feedback/feedbackItem/feedbackItemLoader.tsx
index 26e82981c4a498..c5938e28274f06 100644
--- a/static/app/components/feedback/feedbackItem/feedbackItemLoader.tsx
+++ b/static/app/components/feedback/feedbackItem/feedbackItemLoader.tsx
@@ -7,7 +7,7 @@ import FeedbackItem from 'sentry/components/feedback/feedbackItem/feedbackItem';
 import useCurrentFeedbackId from 'sentry/components/feedback/useCurrentFeedbackId';
 import useCurrentFeedbackProject from 'sentry/components/feedback/useCurrentFeedbackProject';
 import useFetchFeedbackData from 'sentry/components/feedback/useFetchFeedbackData';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import useSentryAppComponentsData from 'sentry/stores/useSentryAppComponentsData';
 import {trackAnalytics} from 'sentry/utils/analytics';
diff --git a/static/app/components/feedback/feedbackItem/feedbackReplay.tsx b/static/app/components/feedback/feedbackItem/feedbackReplay.tsx
index 054fbbe95a63a1..de112941c447c5 100644
--- a/static/app/components/feedback/feedbackItem/feedbackReplay.tsx
+++ b/static/app/components/feedback/feedbackItem/feedbackReplay.tsx
@@ -2,7 +2,7 @@ import ErrorBoundary from 'sentry/components/errorBoundary';
 import FeedbackItemSection from 'sentry/components/feedback/feedbackItem/feedbackItemSection';
 import ReplayInlineCTAPanel from 'sentry/components/feedback/feedbackItem/replayInlineCTAPanel';
 import ReplaySection from 'sentry/components/feedback/feedbackItem/replaySection';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {replayPlatforms} from 'sentry/data/platformCategories';
 import {IconPlay} from 'sentry/icons';
 import {t} from 'sentry/locale';
diff --git a/static/app/components/feedback/feedbackItem/traceDataSection.tsx b/static/app/components/feedback/feedbackItem/traceDataSection.tsx
index 392a899b90e73f..2272462e0c2549 100644
--- a/static/app/components/feedback/feedbackItem/traceDataSection.tsx
+++ b/static/app/components/feedback/feedbackItem/traceDataSection.tsx
@@ -1,7 +1,7 @@
 import {useEffect} from 'react';
 
 import FeedbackItemSection from 'sentry/components/feedback/feedbackItem/feedbackItemSection';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconSpan} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Event} from 'sentry/types/event';
diff --git a/static/app/components/feedback/summaryCategories/feedbackCategories.tsx b/static/app/components/feedback/summaryCategories/feedbackCategories.tsx
index 4639b23dce43d7..90060caf2d01ab 100644
--- a/static/app/components/feedback/summaryCategories/feedbackCategories.tsx
+++ b/static/app/components/feedback/summaryCategories/feedbackCategories.tsx
@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import {Tag} from 'sentry/components/core/badge/tag';
 import {useOrganizationSeerSetup} from 'sentry/components/events/autofix/useOrganizationSeerSetup';
 import useFeedbackCategories from 'sentry/components/feedback/list/useFeedbackCategories';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {MutableSearch} from 'sentry/components/searchSyntax/mutableSearch';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {decodeScalar} from 'sentry/utils/queryString';
diff --git a/static/app/components/feedback/summaryCategories/feedbackSummary.tsx b/static/app/components/feedback/summaryCategories/feedbackSummary.tsx
index c601ede12e05e3..334b31f0d0c7ee 100644
--- a/static/app/components/feedback/summaryCategories/feedbackSummary.tsx
+++ b/static/app/components/feedback/summaryCategories/feedbackSummary.tsx
@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import {Link} from 'sentry/components/core/link';
 import {useOrganizationSeerSetup} from 'sentry/components/events/autofix/useOrganizationSeerSetup';
 import useFeedbackSummary from 'sentry/components/feedback/list/useFeedbackSummary';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t, tct} from 'sentry/locale';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import useOrganization from 'sentry/utils/useOrganization';
diff --git a/static/app/components/group/externalIssuesList/index.tsx b/static/app/components/group/externalIssuesList/index.tsx
index 723187b8eb281d..7b87edba442b0d 100644
--- a/static/app/components/group/externalIssuesList/index.tsx
+++ b/static/app/components/group/externalIssuesList/index.tsx
@@ -15,7 +15,7 @@ import useExternalIssueData from 'sentry/components/group/externalIssuesList/use
 import PluginActions from 'sentry/components/group/pluginActions';
 import SentryAppExternalIssueActions from 'sentry/components/group/sentryAppExternalIssueActions';
 import IssueSyncListElement from 'sentry/components/issueSyncListElement';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import * as SidebarSection from 'sentry/components/sidebarSection';
 import {t} from 'sentry/locale';
 import type {Event} from 'sentry/types/event';
diff --git a/static/app/components/group/externalIssuesList/streamlinedExternalIssueList.tsx b/static/app/components/group/externalIssuesList/streamlinedExternalIssueList.tsx
index 5519a06c0c56db..5c465bbbed5017 100644
--- a/static/app/components/group/externalIssuesList/streamlinedExternalIssueList.tsx
+++ b/static/app/components/group/externalIssuesList/streamlinedExternalIssueList.tsx
@@ -11,7 +11,7 @@ import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import type {ExternalIssueAction} from 'sentry/components/group/externalIssuesList/hooks/types';
 import useGroupExternalIssues from 'sentry/components/group/externalIssuesList/hooks/useGroupExternalIssues';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types/event';
@@ -75,7 +75,7 @@ export function StreamlinedExternalIssueList({
   });
 
   if (isLoading) {
-    return <Placeholder height="25px" testId="issue-tracking-loading" />;
+    return <Placeholder height="25px" data-test-id="issue-tracking-loading" />;
   }
 
   const hasLinkedIssuesOrIntegrations = integrations.length || linkedIssues.length;
diff --git a/static/app/components/group/groupSummary.tsx b/static/app/components/group/groupSummary.tsx
index 52164e7db8fd66..2aea00c3cecc4d 100644
--- a/static/app/components/group/groupSummary.tsx
+++ b/static/app/components/group/groupSummary.tsx
@@ -6,7 +6,7 @@ import {Button} from 'sentry/components/core/button';
 import {Flex} from 'sentry/components/core/layout';
 import {Text} from 'sentry/components/core/text';
 import {makeAutofixQueryKey} from 'sentry/components/events/autofix/useAutofix';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {
   IconChevron,
   IconDocs,
diff --git a/static/app/components/group/groupSummaryWithAutofix.tsx b/static/app/components/group/groupSummaryWithAutofix.tsx
index 5b53fe65687054..6fe301ef5e7ad2 100644
--- a/static/app/components/group/groupSummaryWithAutofix.tsx
+++ b/static/app/components/group/groupSummaryWithAutofix.tsx
@@ -16,7 +16,7 @@ import {
   hasPullRequest,
 } from 'sentry/components/events/autofix/utils';
 import {GroupSummary} from 'sentry/components/group/groupSummary';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconCode, IconFix, IconFocus} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/components/group/releaseStats.tsx b/static/app/components/group/releaseStats.tsx
index d3434184e5821a..c0924e1703fe48 100644
--- a/static/app/components/group/releaseStats.tsx
+++ b/static/app/components/group/releaseStats.tsx
@@ -1,11 +1,13 @@
 import {Fragment, memo} from 'react';
 import styled from '@emotion/styled';
 
+import {Container} from '@sentry/scraps/layout/container';
+
 import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import {AlertLink} from 'sentry/components/core/alert/alertLink';
 import GroupReleaseChart from 'sentry/components/group/releaseChart';
 import SeenInfo from 'sentry/components/group/seenInfo';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import * as SidebarSection from 'sentry/components/sidebarSection';
 import {t} from 'sentry/locale';
@@ -72,7 +74,9 @@ function GroupReleaseStats({
   return (
     <div>
       {!group || !allEnvironments ? (
-        <Placeholder height="346px" bottomGutter={4} />
+        <Container marginBottom="xs">
+          <Placeholder height="346px" />
+        </Container>
       ) : (
         <Fragment>
           <GraphContainer>
diff --git a/static/app/components/group/tagFacets/index.tsx b/static/app/components/group/tagFacets/index.tsx
index cb96673cfd0b3d..d5d6bae501df8f 100644
--- a/static/app/components/group/tagFacets/index.tsx
+++ b/static/app/components/group/tagFacets/index.tsx
@@ -6,7 +6,7 @@ import keyBy from 'lodash/keyBy';
 
 import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import LoadingError from 'sentry/components/loadingError';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import * as SidebarSection from 'sentry/components/sidebarSection';
 import {t} from 'sentry/locale';
diff --git a/static/app/components/issues/groupList.tsx b/static/app/components/issues/groupList.tsx
index 8a4e21f732957a..656dd0774fbdaa 100644
--- a/static/app/components/issues/groupList.tsx
+++ b/static/app/components/issues/groupList.tsx
@@ -11,7 +11,7 @@ import LoadingError from 'sentry/components/loadingError';
 import Pagination from 'sentry/components/pagination';
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {parseSearch, Token} from 'sentry/components/searchSyntax/parser';
 import {treeResultLocator} from 'sentry/components/searchSyntax/utils';
 import StreamGroup, {
diff --git a/static/app/components/modals/bulkEditMonitorsModal.tsx b/static/app/components/modals/bulkEditMonitorsModal.tsx
index e46cf754c63a25..c8398e1f645cb5 100644
--- a/static/app/components/modals/bulkEditMonitorsModal.tsx
+++ b/static/app/components/modals/bulkEditMonitorsModal.tsx
@@ -11,7 +11,7 @@ import {Checkbox} from 'sentry/components/core/checkbox';
 import {Text} from 'sentry/components/core/text';
 import Pagination from 'sentry/components/pagination';
 import {PanelTable} from 'sentry/components/panels/panelTable';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import SearchBar from 'sentry/components/searchBar';
 import {t, tct, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/components/onboarding/gettingStartedDoc/storeCrashReportsConfig.tsx b/static/app/components/onboarding/gettingStartedDoc/storeCrashReportsConfig.tsx
index f044081de4b80d..88b2d59d115637 100644
--- a/static/app/components/onboarding/gettingStartedDoc/storeCrashReportsConfig.tsx
+++ b/static/app/components/onboarding/gettingStartedDoc/storeCrashReportsConfig.tsx
@@ -5,7 +5,7 @@ import {hasEveryAccess} from 'sentry/components/acl/access';
 import Form from 'sentry/components/forms/form';
 import JsonForm from 'sentry/components/forms/jsonForm';
 import Panel from 'sentry/components/panels/panel';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import projectSecurityAndPrivacyGroups from 'sentry/data/forms/projectSecurityAndPrivacyGroups';
 import ProjectsStore from 'sentry/stores/projectsStore';
 import type {Organization} from 'sentry/types/organization';
diff --git a/static/app/components/placeholder.stories.tsx b/static/app/components/placeholder.stories.tsx
index f75a3f98d5c891..93fc5ff10220d5 100644
--- a/static/app/components/placeholder.stories.tsx
+++ b/static/app/components/placeholder.stories.tsx
@@ -1,4 +1,4 @@
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import * as Storybook from 'sentry/stories';
 
 export default Storybook.story('Placeholder', story => {
@@ -14,20 +14,10 @@ export default Storybook.story('Placeholder', story => {
     </Placeholder>
   ));
 
-  story('Error State', () => <Placeholder error="Failed to load data" height="100px" />);
-
-  story('With Bottom Gutter', () => (
-    <div>
-      <Placeholder bottomGutter={2} />
-      <div>Content below placeholder</div>
-    </div>
-  ));
-
   story('Multiple Variations', () => (
     <div style={{display: 'flex', gap: '16px', flexWrap: 'wrap'}}>
       <Placeholder width="100px" height="60px" />
       <Placeholder shape="circle" width="60px" height="60px" />
-      <Placeholder error="Error" width="120px" height="60px" />
       <Placeholder width="150px" height="60px">
         Custom content
       </Placeholder>
diff --git a/static/app/components/placeholder.tsx b/static/app/components/placeholder.tsx
index 03387dc09a1f11..874a443e6f992a 100644
--- a/static/app/components/placeholder.tsx
+++ b/static/app/components/placeholder.tsx
@@ -1,50 +1,28 @@
-import styled from '@emotion/styled';
+import {Flex, type FlexProps} from '@sentry/scraps/layout';
+import {type ContainerElement} from '@sentry/scraps/layout/container';
 
-import type {ValidSize} from 'sentry/styles/space';
-import {space} from 'sentry/styles/space';
-
-export interface PlaceholderProps {
-  bottomGutter?: ValidSize;
+type PlaceholderProps<T extends ContainerElement = 'div'> = FlexProps<T> & {
+  /**
+   * @deprecated Do not use this component as a replacement for empty state.
+   */
   children?: React.ReactNode;
-  className?: string;
-  error?: React.ReactNode;
-  height?: string;
-  shape?: 'rect' | 'circle';
-  style?: React.CSSProperties;
-  testId?: string;
-  width?: string;
-}
+  shape?: 'circle';
+};
 
-const Placeholder = styled(
-  ({
-    className,
-    children,
-    error,
-    testId = 'loading-placeholder',
-    style,
-  }: PlaceholderProps) => {
-    return (
-      <div data-test-id={testId} className={className} style={style}>
-        {error || children}
-      </div>
-    );
-  }
-)<PlaceholderProps>`
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  justify-content: center;
-  align-items: center;
-  border-radius: ${p => p.theme.borderRadius};
-  background-color: ${p => (p.error ? p.theme.red100 : p.theme.backgroundTertiary)};
-  ${p => !!p.error && `color: ${p.theme.red200};`}
-  width: ${p => p.width ?? '100%'};
-  height: ${p => p.height ?? '60px'};
-  ${({shape = 'rect'}) => (shape === 'circle' ? 'border-radius: 100%;' : '')}
-  ${({bottomGutter = 0}) =>
-    typeof bottomGutter === 'number' && bottomGutter > 0
-      ? `margin-bottom: ${space(bottomGutter as Parameters<typeof space>[0])};`
-      : ''}
-`;
-
-export default Placeholder;
+export function Placeholder(props: PlaceholderProps<'div'>) {
+  const {radius, shape, ['data-test-id']: dataTestId, ...rest} = props;
+  return (
+    <Flex
+      direction="column"
+      flexShrink={0}
+      justify="center"
+      align="center"
+      background="tertiary"
+      width={props.width ?? '100%'}
+      height={props.height ?? '60px'}
+      radius={shape === 'circle' ? 'full' : (radius ?? 'md')}
+      data-test-id={dataTestId ?? 'loading-placeholder'}
+      {...rest}
+    />
+  );
+}
diff --git a/static/app/components/prevent/summary.tsx b/static/app/components/prevent/summary.tsx
index 5941753339186e..e88bf9f00f90bb 100644
--- a/static/app/components/prevent/summary.tsx
+++ b/static/app/components/prevent/summary.tsx
@@ -5,7 +5,7 @@ import {Button} from 'sentry/components/core/button';
 import {Flex, Grid} from 'sentry/components/core/layout';
 import {Link} from 'sentry/components/core/link';
 import {Heading, Text} from 'sentry/components/core/text';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import {IconClose, IconFilter} from 'sentry/icons';
 import {t} from 'sentry/locale';
diff --git a/static/app/components/replays/breadcrumbs/breadcrumbCodeSnippet.tsx b/static/app/components/replays/breadcrumbs/breadcrumbCodeSnippet.tsx
index a38e39bb1e2107..a447c59415ee86 100644
--- a/static/app/components/replays/breadcrumbs/breadcrumbCodeSnippet.tsx
+++ b/static/app/components/replays/breadcrumbs/breadcrumbCodeSnippet.tsx
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import beautify from 'js-beautify';
 
 import {CodeBlock} from 'sentry/components/core/code';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import type {Extraction} from 'sentry/utils/replays/extractDomNodes';
 import type {ReplayFrame} from 'sentry/utils/replays/types';
 import {isSpanFrame} from 'sentry/utils/replays/types';
diff --git a/static/app/components/replays/breadcrumbs/replayTimeline.tsx b/static/app/components/replays/breadcrumbs/replayTimeline.tsx
index f3cf39659d1d76..8aaf3430c97134 100644
--- a/static/app/components/replays/breadcrumbs/replayTimeline.tsx
+++ b/static/app/components/replays/breadcrumbs/replayTimeline.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import Stacked from 'sentry/components/container/stacked';
 import Panel from 'sentry/components/panels/panel';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {
   MajorGridlines,
   MinorGridlines,
diff --git a/static/app/components/replays/header/replayMetaData.tsx b/static/app/components/replays/header/replayMetaData.tsx
index 4415b73ca6deb9..8287d5f6583429 100644
--- a/static/app/components/replays/header/replayMetaData.tsx
+++ b/static/app/components/replays/header/replayMetaData.tsx
@@ -2,7 +2,7 @@ import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import {Link} from 'sentry/components/core/link';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import ErrorCounts from 'sentry/components/replays/header/errorCounts';
 import ReplayViewers from 'sentry/components/replays/header/replayViewers';
 import {IconCursorArrow} from 'sentry/icons';
diff --git a/static/app/components/replays/header/replayViewers.tsx b/static/app/components/replays/header/replayViewers.tsx
index 7957949cbd8d3e..5fc4b0e87e403c 100644
--- a/static/app/components/replays/header/replayViewers.tsx
+++ b/static/app/components/replays/header/replayViewers.tsx
@@ -1,5 +1,5 @@
 import AvatarList from 'sentry/components/core/avatar/avatarList';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import type {User} from 'sentry/types/user';
 import {useApiQuery} from 'sentry/utils/queryClient';
 import useOrganization from 'sentry/utils/useOrganization';
diff --git a/static/app/components/savedEntityTable.tsx b/static/app/components/savedEntityTable.tsx
index 5366fd47f8a33e..46f1a2b0266d1f 100644
--- a/static/app/components/savedEntityTable.tsx
+++ b/static/app/components/savedEntityTable.tsx
@@ -9,7 +9,7 @@ import {Tooltip} from 'sentry/components/core/tooltip';
 import {DropdownMenu, type MenuItemProps} from 'sentry/components/dropdownMenu';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
 import LoadingError from 'sentry/components/loadingError';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {ProjectList} from 'sentry/components/projectList';
 import {ProvidedFormattedQuery} from 'sentry/components/searchQueryBuilder/formattedQuery';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
diff --git a/static/app/components/stream/group.tsx b/static/app/components/stream/group.tsx
index 452c44b3ddf03c..601e48665e3a84 100644
--- a/static/app/components/stream/group.tsx
+++ b/static/app/components/stream/group.tsx
@@ -19,7 +19,7 @@ import {AssigneeSelector} from 'sentry/components/group/assigneeSelector';
 import {getBadgeProperties} from 'sentry/components/group/inboxBadges/statusBadge';
 import type {GroupListColumn} from 'sentry/components/issues/groupList';
 import PanelItem from 'sentry/components/panels/panelItem';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import ProgressBar from 'sentry/components/progressBar';
 import {joinQuery, parseSearch, Token} from 'sentry/components/searchSyntax/parser';
 import {getRelativeSummary} from 'sentry/components/timeRangeSelector/utils';
diff --git a/static/app/views/alerts/rules/issue/details/alertChart.tsx b/static/app/views/alerts/rules/issue/details/alertChart.tsx
index 1b05fdcf04c2b9..87aee855bfca09 100644
--- a/static/app/views/alerts/rules/issue/details/alertChart.tsx
+++ b/static/app/views/alerts/rules/issue/details/alertChart.tsx
@@ -7,7 +7,7 @@ import type {DateTimeObject} from 'sentry/components/charts/utils';
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
 import PanelFooter from 'sentry/components/panels/panelFooter';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {IssueAlertRule, ProjectAlertRuleStats} from 'sentry/types/alerts';
diff --git a/static/app/views/alerts/rules/metric/details/body.tsx b/static/app/views/alerts/rules/metric/details/body.tsx
index 2ef45f91941f8d..7760eaf88bc80b 100644
--- a/static/app/views/alerts/rules/metric/details/body.tsx
+++ b/static/app/views/alerts/rules/metric/details/body.tsx
@@ -10,7 +10,7 @@ import {Tooltip} from 'sentry/components/core/tooltip';
 import * as Layout from 'sentry/components/layouts/thirds';
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import type {ChangeData} from 'sentry/components/timeRangeSelector';
 import {TimeRangeSelector} from 'sentry/components/timeRangeSelector';
 import {IconClose} from 'sentry/icons';
diff --git a/static/app/views/alerts/rules/metric/details/metricChart.tsx b/static/app/views/alerts/rules/metric/details/metricChart.tsx
index 0e8cfb5e173bf3..d850bda0e41df6 100644
--- a/static/app/views/alerts/rules/metric/details/metricChart.tsx
+++ b/static/app/views/alerts/rules/metric/details/metricChart.tsx
@@ -31,7 +31,7 @@ import {Tooltip} from 'sentry/components/core/tooltip';
 import {parseStatsPeriod} from 'sentry/components/organizations/pageFilters/parse';
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconCheckmark, IconClock, IconFire, IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -174,11 +174,11 @@ export default function MetricChart({
     [location.pathname, navigate]
   );
 
-  const renderEmpty = useCallback((placeholderText = '') => {
+  const renderEmpty = useCallback(() => {
     return (
       <ChartPanel>
         <PanelBody withPadding>
-          <TriggerChartPlaceholder>{placeholderText}</TriggerChartPlaceholder>
+          <TriggerChartPlaceholder />
         </PanelBody>
       </ChartPanel>
     );
diff --git a/static/app/views/alerts/rules/metric/triggers/chart/index.tsx b/static/app/views/alerts/rules/metric/triggers/chart/index.tsx
index 914fd5a1ed82d1..4489fcfafdd381 100644
--- a/static/app/views/alerts/rules/metric/triggers/chart/index.tsx
+++ b/static/app/views/alerts/rules/metric/triggers/chart/index.tsx
@@ -24,7 +24,7 @@ import {
 import {CompactSelect} from 'sentry/components/core/compactSelect';
 import LoadingMask from 'sentry/components/loadingMask';
 import PanelAlert from 'sentry/components/panels/panelAlert';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/views/alerts/rules/uptime/detailsSidebar.tsx b/static/app/views/alerts/rules/uptime/detailsSidebar.tsx
index 4d28c0821b8eda..3a45fdf14f126d 100644
--- a/static/app/views/alerts/rules/uptime/detailsSidebar.tsx
+++ b/static/app/views/alerts/rules/uptime/detailsSidebar.tsx
@@ -7,7 +7,7 @@ import {CodeBlock} from 'sentry/components/core/code';
 import {Grid} from 'sentry/components/core/layout';
 import {Text} from 'sentry/components/core/text';
 import {KeyValueTable, KeyValueTableRow} from 'sentry/components/keyValueTable';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t, tn} from 'sentry/locale';
 import type {UptimeDetector} from 'sentry/types/workflowEngine/detectors';
 import getDuration from 'sentry/utils/duration/getDuration';
diff --git a/static/app/views/alerts/rules/uptime/uptimeChecksGrid.tsx b/static/app/views/alerts/rules/uptime/uptimeChecksGrid.tsx
index 7f5a6f43711a71..3298fc09c34e7b 100644
--- a/static/app/views/alerts/rules/uptime/uptimeChecksGrid.tsx
+++ b/static/app/views/alerts/rules/uptime/uptimeChecksGrid.tsx
@@ -6,7 +6,7 @@ import {ExternalLink, Link} from 'sentry/components/core/link';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import {DateTime} from 'sentry/components/dateTime';
 import Duration from 'sentry/components/duration';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import type {GridColumnOrder} from 'sentry/components/tables/gridEditable';
 import GridEditable from 'sentry/components/tables/gridEditable';
 import {t, tct} from 'sentry/locale';
diff --git a/static/app/views/automations/components/automationHistoryList.tsx b/static/app/views/automations/components/automationHistoryList.tsx
index 75fc51a51f372c..5a9dd95b384583 100644
--- a/static/app/views/automations/components/automationHistoryList.tsx
+++ b/static/app/views/automations/components/automationHistoryList.tsx
@@ -7,7 +7,7 @@ import {Link} from 'sentry/components/core/link';
 import {DateTime} from 'sentry/components/dateTime';
 import LoadingError from 'sentry/components/loadingError';
 import Pagination from 'sentry/components/pagination';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {t, tct} from 'sentry/locale';
 import {parseCursor} from 'sentry/utils/cursor';
diff --git a/static/app/views/automations/components/automationListTable/connectedDetectors.tsx b/static/app/views/automations/components/automationListTable/connectedDetectors.tsx
index 63b453387675d2..3640560d477742 100644
--- a/static/app/views/automations/components/automationListTable/connectedDetectors.tsx
+++ b/static/app/views/automations/components/automationListTable/connectedDetectors.tsx
@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import InteractionStateLayer from 'sentry/components/core/interactionStateLayer';
 import {Hovercard} from 'sentry/components/hovercard';
 import LoadingError from 'sentry/components/loadingError';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {EmptyCell} from 'sentry/components/workflowEngine/gridCell/emptyCell';
 import {tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/views/automations/components/automationListTable/row.tsx b/static/app/views/automations/components/automationListTable/row.tsx
index fec387c0e32272..89b659b2596256 100644
--- a/static/app/views/automations/components/automationListTable/row.tsx
+++ b/static/app/views/automations/components/automationListTable/row.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import {hasEveryAccess} from 'sentry/components/acl/access';
 import {Checkbox} from 'sentry/components/core/checkbox';
 import {Flex} from 'sentry/components/core/layout';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {ProjectList} from 'sentry/components/projectList';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {ActionCell} from 'sentry/components/workflowEngine/gridCell/actionCell';
diff --git a/static/app/views/automations/components/automationStatsChart.tsx b/static/app/views/automations/components/automationStatsChart.tsx
index f776289ee3b747..53eb8fdd04ecf7 100644
--- a/static/app/views/automations/components/automationStatsChart.tsx
+++ b/static/app/views/automations/components/automationStatsChart.tsx
@@ -8,7 +8,7 @@ import LoadingError from 'sentry/components/loadingError';
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
 import PanelFooter from 'sentry/components/panels/panelFooter';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Automation, AutomationStats} from 'sentry/types/workflowEngine/automations';
diff --git a/static/app/views/automations/components/conditionsPanel.tsx b/static/app/views/automations/components/conditionsPanel.tsx
index 86eb8d43ae4927..311dd586940196 100644
--- a/static/app/views/automations/components/conditionsPanel.tsx
+++ b/static/app/views/automations/components/conditionsPanel.tsx
@@ -2,7 +2,7 @@ import {Fragment} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {ConditionBadge} from 'sentry/components/workflowEngine/ui/conditionBadge';
 import {IconWarning} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
diff --git a/static/app/views/automations/components/connectedMonitorsList.tsx b/static/app/views/automations/components/connectedMonitorsList.tsx
index ca8304783b12de..696389b9eb27ea 100644
--- a/static/app/views/automations/components/connectedMonitorsList.tsx
+++ b/static/app/views/automations/components/connectedMonitorsList.tsx
@@ -1,11 +1,13 @@
 import {Fragment, useMemo} from 'react';
 import styled from '@emotion/styled';
 
+import {Container as ScrapsContainer} from '@sentry/scraps/layout';
+
 import {Button} from 'sentry/components/core/button';
 import LoadingError from 'sentry/components/loadingError';
 import type {CursorHandler} from 'sentry/components/pagination';
 import Pagination from 'sentry/components/pagination';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {IssueCell} from 'sentry/components/workflowEngine/gridCell/issueCell';
 import {t, tct} from 'sentry/locale';
@@ -41,7 +43,9 @@ function Skeletons({canEdit, numberOfRows}: {canEdit: boolean; numberOfRows: num
         <SimpleTable.Row key={index}>
           <SimpleTable.RowCell>
             <div style={{width: '100%'}}>
-              <Placeholder height="20px" width="50%" style={{marginBottom: '4px'}} />
+              <ScrapsContainer marginBottom="xs">
+                <Placeholder height="20px" width="50%" />
+              </ScrapsContainer>
               <Placeholder height="16px" width="20%" />
             </div>
           </SimpleTable.RowCell>
diff --git a/static/app/views/automations/detail.tsx b/static/app/views/automations/detail.tsx
index 4a72a11a596a48..20351b0fcc8713 100644
--- a/static/app/views/automations/detail.tsx
+++ b/static/app/views/automations/detail.tsx
@@ -13,7 +13,7 @@ import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import TimeSince from 'sentry/components/timeSince';
 import DetailLayout from 'sentry/components/workflowEngine/layout/detail';
diff --git a/static/app/views/dashboards/manage/dashboardGrid.tsx b/static/app/views/dashboards/manage/dashboardGrid.tsx
index 12b295fafb3ecb..ecb689f5894a96 100644
--- a/static/app/views/dashboards/manage/dashboardGrid.tsx
+++ b/static/app/views/dashboards/manage/dashboardGrid.tsx
@@ -10,7 +10,7 @@ import {Button} from 'sentry/components/core/button';
 import type {MenuItemProps} from 'sentry/components/dropdownMenu';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import TimeSince from 'sentry/components/timeSince';
 import {IconEllipsis} from 'sentry/icons';
 import {t, tn} from 'sentry/locale';
diff --git a/static/app/views/dashboards/widgetCard/chart.tsx b/static/app/views/dashboards/widgetCard/chart.tsx
index ba78c17dc285a8..40bdf20ce18c7c 100644
--- a/static/app/views/dashboards/widgetCard/chart.tsx
+++ b/static/app/views/dashboards/widgetCard/chart.tsx
@@ -16,8 +16,7 @@ import TransitionChart from 'sentry/components/charts/transitionChart';
 import TransparentLoadingMask from 'sentry/components/charts/transparentLoadingMask';
 import {getSeriesSelection, isChartHovered} from 'sentry/components/charts/utils';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import type {PlaceholderProps} from 'sentry/components/placeholder';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -183,7 +182,7 @@ function WidgetCardChart(props: WidgetCardChartProps) {
           <TableComponent tableResults={tableResults} {...props} />
         </TransitionChart>
       ),
-      fixed: <Placeholder height="200px" testId="skeleton-ui" />,
+      fixed: <Placeholder height="200px" data-test-id="skeleton-ui" />,
     });
   }
 
@@ -460,7 +459,7 @@ function WidgetCardChart(props: WidgetCardChartProps) {
                           },
                           widget
                         ),
-                        fixed: <Placeholder height="200px" testId="skeleton-ui" />,
+                        fixed: <Placeholder height="200px" data-test-id="skeleton-ui" />,
                       })}
                     </RenderedChartContainer>
 
@@ -501,7 +500,7 @@ function TableComponent({
 
   if (loading || !tableResults?.[0]) {
     // Align height to other charts.
-    return <LoadingPlaceholder />;
+    return <Placeholder height="200px" />;
   }
 
   const datasetConfig = getDatasetConfig(widget.widgetType);
@@ -737,12 +736,6 @@ function LoadingScreen({
   );
 }
 
-const LoadingPlaceholder = styled(({className}: PlaceholderProps) => (
-  <Placeholder height="200px" className={className} />
-))`
-  background-color: ${p => p.theme.surface300};
-`;
-
 const BigNumberResizeWrapper = styled('div')<{noPadding?: boolean}>`
   flex-grow: 1;
   overflow: hidden;
diff --git a/static/app/views/dashboards/widgetCard/index.tsx b/static/app/views/dashboards/widgetCard/index.tsx
index 6e0ed8a82445ef..85a902b9ec7312 100644
--- a/static/app/views/dashboards/widgetCard/index.tsx
+++ b/static/app/views/dashboards/widgetCard/index.tsx
@@ -8,7 +8,7 @@ import {DateTime} from 'sentry/components/dateTime';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import {isWidgetViewerPath} from 'sentry/components/modals/widgetViewerModal/utils';
 import PanelAlert from 'sentry/components/panels/panelAlert';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {parseQueryBuilderValue} from 'sentry/components/searchQueryBuilder/utils';
 import {Token} from 'sentry/components/searchSyntax/parser';
 import {t, tct} from 'sentry/locale';
diff --git a/static/app/views/detectors/components/connectedAutomationList.tsx b/static/app/views/detectors/components/connectedAutomationList.tsx
index 485f994f45b398..b785d31cf42761 100644
--- a/static/app/views/detectors/components/connectedAutomationList.tsx
+++ b/static/app/views/detectors/components/connectedAutomationList.tsx
@@ -5,7 +5,7 @@ import {Button} from 'sentry/components/core/button';
 import LoadingError from 'sentry/components/loadingError';
 import type {CursorHandler} from 'sentry/components/pagination';
 import Pagination from 'sentry/components/pagination';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {ActionCell} from 'sentry/components/workflowEngine/gridCell/actionCell';
 import AutomationTitleCell from 'sentry/components/workflowEngine/gridCell/automationTitleCell';
diff --git a/static/app/views/detectors/components/details/common/assignee.tsx b/static/app/views/detectors/components/details/common/assignee.tsx
index 950de51aeb8e8a..c251195fe6615a 100644
--- a/static/app/views/detectors/components/details/common/assignee.tsx
+++ b/static/app/views/detectors/components/details/common/assignee.tsx
@@ -1,7 +1,7 @@
 import {Flex} from 'sentry/components/core/layout/flex';
 import {Link} from 'sentry/components/core/link';
 import {Tooltip} from 'sentry/components/core/tooltip';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import Section from 'sentry/components/workflowEngine/ui/section';
 import {t} from 'sentry/locale';
 import type {Detector} from 'sentry/types/workflowEngine/detectors';
diff --git a/static/app/views/detectors/components/details/common/extraDetails.tsx b/static/app/views/detectors/components/details/common/extraDetails.tsx
index e53b93f7305afc..12ed0ed9c0bc3c 100644
--- a/static/app/views/detectors/components/details/common/extraDetails.tsx
+++ b/static/app/views/detectors/components/details/common/extraDetails.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import {DateTime} from 'sentry/components/dateTime';
 import {KeyValueTable, KeyValueTableRow} from 'sentry/components/keyValueTable';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import TextOverflow from 'sentry/components/textOverflow';
 import TimeSince from 'sentry/components/timeSince';
 import Section from 'sentry/components/workflowEngine/ui/section';
diff --git a/static/app/views/detectors/components/details/common/openPeriodIssues.tsx b/static/app/views/detectors/components/details/common/openPeriodIssues.tsx
index ecb3202c8eabc3..24025eef8429a8 100644
--- a/static/app/views/detectors/components/details/common/openPeriodIssues.tsx
+++ b/static/app/views/detectors/components/details/common/openPeriodIssues.tsx
@@ -16,7 +16,7 @@ import {
 } from 'sentry/components/group/assigneeSelector';
 import {GroupStatusTag} from 'sentry/components/group/inboxBadges/groupStatusTag';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {TimeAgoCell} from 'sentry/components/workflowEngine/gridCell/timeAgoCell';
 import Section from 'sentry/components/workflowEngine/ui/section';
diff --git a/static/app/views/detectors/components/details/error/index.tsx b/static/app/views/detectors/components/details/error/index.tsx
index f63e3b398b908f..20b29d3c03824e 100644
--- a/static/app/views/detectors/components/details/error/index.tsx
+++ b/static/app/views/detectors/components/details/error/index.tsx
@@ -1,7 +1,7 @@
 import {ExternalLink, Link} from 'sentry/components/core/link';
 import {Text} from 'sentry/components/core/text';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import DetailLayout from 'sentry/components/workflowEngine/layout/detail';
 import Section from 'sentry/components/workflowEngine/ui/section';
 import {t, tct, tn} from 'sentry/locale';
diff --git a/static/app/views/detectors/components/details/metric/chart.tsx b/static/app/views/detectors/components/details/metric/chart.tsx
index 7bc8139ad9659a..d487d90e5165fe 100644
--- a/static/app/views/detectors/components/details/metric/chart.tsx
+++ b/static/app/views/detectors/components/details/metric/chart.tsx
@@ -9,7 +9,7 @@ import ErrorPanel from 'sentry/components/charts/errorPanel';
 import {useChartZoom} from 'sentry/components/charts/useChartZoom';
 import {Alert} from 'sentry/components/core/alert';
 import {Flex} from 'sentry/components/core/layout';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/views/detectors/components/details/uptime/index.tsx b/static/app/views/detectors/components/details/uptime/index.tsx
index c2549e8ee904e0..4fdeca715297d3 100644
--- a/static/app/views/detectors/components/details/uptime/index.tsx
+++ b/static/app/views/detectors/components/details/uptime/index.tsx
@@ -5,7 +5,7 @@ import {Grid} from 'sentry/components/core/layout';
 import {Text} from 'sentry/components/core/text';
 import {KeyValueTableRow} from 'sentry/components/keyValueTable';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import DetailLayout from 'sentry/components/workflowEngine/layout/detail';
 import Section from 'sentry/components/workflowEngine/ui/section';
 import {t, tn} from 'sentry/locale';
diff --git a/static/app/views/detectors/components/detectorListConnectedAutomations.tsx b/static/app/views/detectors/components/detectorListConnectedAutomations.tsx
index 4157193dd1cc5b..604f4ffe3d7726 100644
--- a/static/app/views/detectors/components/detectorListConnectedAutomations.tsx
+++ b/static/app/views/detectors/components/detectorListConnectedAutomations.tsx
@@ -5,7 +5,7 @@ import InteractionStateLayer from 'sentry/components/core/interactionStateLayer'
 import {Link} from 'sentry/components/core/link';
 import {Hovercard} from 'sentry/components/hovercard';
 import LoadingError from 'sentry/components/loadingError';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {EmptyCell} from 'sentry/components/workflowEngine/gridCell/emptyCell';
 import {tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/views/detectors/components/detectorListTable/detectorListRow.tsx b/static/app/views/detectors/components/detectorListTable/detectorListRow.tsx
index a0959135e7a796..0fcb0c895495ba 100644
--- a/static/app/views/detectors/components/detectorListTable/detectorListRow.tsx
+++ b/static/app/views/detectors/components/detectorListTable/detectorListRow.tsx
@@ -2,8 +2,8 @@ import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import {Checkbox} from 'sentry/components/core/checkbox';
-import {Flex} from 'sentry/components/core/layout';
-import Placeholder from 'sentry/components/placeholder';
+import {Container, Flex} from 'sentry/components/core/layout';
+import {Placeholder} from 'sentry/components/placeholder';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {IssueCell} from 'sentry/components/workflowEngine/gridCell/issueCell';
 import type {Detector} from 'sentry/types/workflowEngine/detectors';
@@ -68,7 +68,9 @@ export function DetectorListRowSkeleton() {
     <DetectorSimpleTableRow>
       <SimpleTable.RowCell>
         <div style={{width: '100%'}}>
-          <Placeholder height="20px" width="50%" style={{marginBottom: '4px'}} />
+          <Container marginBottom="xs">
+            {props => <Placeholder height="20px" width="50%" {...props} />}
+          </Container>
           <Placeholder height="16px" width="20%" />
         </div>
       </SimpleTable.RowCell>
diff --git a/static/app/views/detectors/components/forms/metric/metricDetectorChart.tsx b/static/app/views/detectors/components/forms/metric/metricDetectorChart.tsx
index 7d676acd1fc747..ec383a4638a56c 100644
--- a/static/app/views/detectors/components/forms/metric/metricDetectorChart.tsx
+++ b/static/app/views/detectors/components/forms/metric/metricDetectorChart.tsx
@@ -10,7 +10,7 @@ import {CompactSelect} from 'sentry/components/core/compactSelect';
 import {Flex} from 'sentry/components/core/layout';
 import {Text} from 'sentry/components/core/text';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconWarning} from 'sentry/icons';
 import {t, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/views/discover/results/resultsChart.tsx b/static/app/views/discover/results/resultsChart.tsx
index 02f20b968c50bf..909d8a7ccc7668 100644
--- a/static/app/views/discover/results/resultsChart.tsx
+++ b/static/app/views/discover/results/resultsChart.tsx
@@ -10,7 +10,7 @@ import EventsChart from 'sentry/components/charts/eventsChart';
 import {getInterval, getPreviousSeriesName} from 'sentry/components/charts/utils';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import Panel from 'sentry/components/panels/panel';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import type {SelectValue} from 'sentry/types/core';
 import type {Organization} from 'sentry/types/organization';
@@ -149,7 +149,7 @@ class ResultsChart extends Component<ResultsChartProps> {
               disableableSeries={disableableSeries}
             />
           ),
-          fixed: <Placeholder height="200px" testId="skeleton-ui" />,
+          fixed: <Placeholder height="200px" data-test-id="skeleton-ui" />,
         })}
       </Fragment>
     );
diff --git a/static/app/views/discover/results/tags.tsx b/static/app/views/discover/results/tags.tsx
index 67a0c38b00d6d4..75f4228a34bd97 100644
--- a/static/app/views/discover/results/tags.tsx
+++ b/static/app/views/discover/results/tags.tsx
@@ -14,7 +14,7 @@ import {deviceNameMapper} from 'sentry/components/deviceName';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
 import {TagFacetsList} from 'sentry/components/group/tagFacets';
 import TagFacetsDistributionMeter from 'sentry/components/group/tagFacets/tagFacetsDistributionMeter';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/views/insights/agents/utils/cells.tsx b/static/app/views/insights/agents/utils/cells.tsx
index d5862e89739c4d..87e8cedd905ccf 100644
--- a/static/app/views/insights/agents/utils/cells.tsx
+++ b/static/app/views/insights/agents/utils/cells.tsx
@@ -1,5 +1,7 @@
+import {Container} from '@sentry/scraps/layout';
+
 import {Link} from 'sentry/components/core/link';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {TextAlignRight} from 'sentry/views/insights/common/components/textAlign';
 
 export function ErrorCell({
@@ -25,5 +27,9 @@ export function ErrorCell({
 }
 
 export function NumberPlaceholder() {
-  return <Placeholder style={{marginLeft: 'auto'}} height="14px" width="50px" />;
+  return (
+    <Container marginLeft="auto">
+      {props => <Placeholder height="14px" width="50px" {...props} />}
+    </Container>
+  );
 }
diff --git a/static/app/views/insights/browser/webVitals/components/pageOverviewSidebar.tsx b/static/app/views/insights/browser/webVitals/components/pageOverviewSidebar.tsx
index cd7e7017f01e27..447c9c6d519d56 100644
--- a/static/app/views/insights/browser/webVitals/components/pageOverviewSidebar.tsx
+++ b/static/app/views/insights/browser/webVitals/components/pageOverviewSidebar.tsx
@@ -22,7 +22,7 @@ import {
   getSolutionIsLoading,
 } from 'sentry/components/events/autofix/utils';
 import {AutofixSummary} from 'sentry/components/group/groupSummaryWithAutofix';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import {IconSeer} from 'sentry/icons';
 import {t} from 'sentry/locale';
diff --git a/static/app/views/insights/crons/components/mockTimelineVisualization.tsx b/static/app/views/insights/crons/components/mockTimelineVisualization.tsx
index 7c39411dbcddca..a37bf8ac7cb404 100644
--- a/static/app/views/insights/crons/components/mockTimelineVisualization.tsx
+++ b/static/app/views/insights/crons/components/mockTimelineVisualization.tsx
@@ -11,7 +11,7 @@ import {getConfigFromTimeRange} from 'sentry/components/checkInTimeline/utils/ge
 import FormContext from 'sentry/components/forms/formContext';
 import type {FieldValue} from 'sentry/components/forms/model';
 import Panel from 'sentry/components/panels/panel';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import {useApiQuery} from 'sentry/utils/queryClient';
 import {useDimensions} from 'sentry/utils/useDimensions';
diff --git a/static/app/views/insights/pages/platform/laravel/pathsTable.tsx b/static/app/views/insights/pages/platform/laravel/pathsTable.tsx
index c6228a08edd7d8..eeeba56551f22f 100644
--- a/static/app/views/insights/pages/platform/laravel/pathsTable.tsx
+++ b/static/app/views/insights/pages/platform/laravel/pathsTable.tsx
@@ -3,7 +3,7 @@ import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {Tooltip} from 'sentry/components/core/tooltip';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {
   COL_WIDTH_UNDEFINED,
   type GridColumnHeader,
diff --git a/static/app/views/insights/pages/platform/shared/issuesWidget.tsx b/static/app/views/insights/pages/platform/shared/issuesWidget.tsx
index f8c2d31a8467e4..fe42551b8b4096 100644
--- a/static/app/views/insights/pages/platform/shared/issuesWidget.tsx
+++ b/static/app/views/insights/pages/platform/shared/issuesWidget.tsx
@@ -13,7 +13,7 @@ import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilte
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
 import PanelHeader from 'sentry/components/panels/panelHeader';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import StreamGroup, {
   DEFAULT_STREAM_GROUP_STATS_PERIOD,
 } from 'sentry/components/stream/group';
diff --git a/static/app/views/insights/uptime/components/overviewTimeline/overviewRow.tsx b/static/app/views/insights/uptime/components/overviewTimeline/overviewRow.tsx
index 086334bf1f33f1..d862dcc076b365 100644
--- a/static/app/views/insights/uptime/components/overviewTimeline/overviewRow.tsx
+++ b/static/app/views/insights/uptime/components/overviewTimeline/overviewRow.tsx
@@ -12,7 +12,7 @@ import {Link, type LinkProps} from 'sentry/components/core/link';
 import {Heading, Text} from 'sentry/components/core/text';
 import ActorBadge from 'sentry/components/idBadge/actorBadge';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconClock, IconStats, IconTimer, IconUser} from 'sentry/icons';
 import {IconDefaultsProvider} from 'sentry/icons/useIconDefaults';
 import {t, tn} from 'sentry/locale';
diff --git a/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx b/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx
index b850f483358280..ea2f0116d20f90 100644
--- a/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx
+++ b/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx
@@ -56,7 +56,7 @@ import {EventRRWebIntegration} from 'sentry/components/events/rrwebIntegration';
 import {DataSection} from 'sentry/components/events/styles';
 import {SuspectCommits} from 'sentry/components/events/suspectCommits';
 import {EventUserFeedback} from 'sentry/components/events/userFeedback';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconChevron} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/views/issueDetails/groupEventDetails/groupEventDetailsLoading.tsx b/static/app/views/issueDetails/groupEventDetails/groupEventDetailsLoading.tsx
index a0a0b6bad69f85..da9b3d9a1f0e37 100644
--- a/static/app/views/issueDetails/groupEventDetails/groupEventDetailsLoading.tsx
+++ b/static/app/views/issueDetails/groupEventDetails/groupEventDetailsLoading.tsx
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 import {Flex} from 'sentry/components/core/layout';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {space} from 'sentry/styles/space';
 import {useUser} from 'sentry/utils/useUser';
 
diff --git a/static/app/views/issueDetails/groupReplays/groupReplays.tsx b/static/app/views/issueDetails/groupReplays/groupReplays.tsx
index 6e7246fe1164ad..68845214ad6077 100644
--- a/static/app/views/issueDetails/groupReplays/groupReplays.tsx
+++ b/static/app/views/issueDetails/groupReplays/groupReplays.tsx
@@ -5,7 +5,7 @@ import type {Location} from 'history';
 
 import {Button} from 'sentry/components/core/button';
 import * as Layout from 'sentry/components/layouts/thirds';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {
   SelectedReplayIndexProvider,
   useSelectedReplayIndex,
diff --git a/static/app/views/issueDetails/metricIssues/metricIssueChart.tsx b/static/app/views/issueDetails/metricIssues/metricIssueChart.tsx
index d4f21c1f72336e..e795ec71e1775d 100644
--- a/static/app/views/issueDetails/metricIssues/metricIssueChart.tsx
+++ b/static/app/views/issueDetails/metricIssues/metricIssueChart.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import {AreaChart} from 'sentry/components/charts/areaChart';
 import {useChartZoom} from 'sentry/components/charts/useChartZoom';
 import {Alert} from 'sentry/components/core/alert';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import type {Group} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
@@ -146,7 +146,7 @@ function MetricIssueChartContent({
 function MetricIssuePlaceholder({type}: {type: 'loading' | 'error'}) {
   return type === 'loading' ? (
     <PlaceholderContainer>
-      <Placeholder height="96px" testId="metric-issue-chart-loading" />
+      <Placeholder height="96px" data-test-id="metric-issue-chart-loading" />
     </PlaceholderContainer>
   ) : (
     <MetricChartAlert type="error" showIcon data-test-id="metric-issue-chart-error">
diff --git a/static/app/views/issueDetails/streamline/eventGraph.tsx b/static/app/views/issueDetails/streamline/eventGraph.tsx
index daf3404a363fbf..a7d42fce766cd3 100644
--- a/static/app/views/issueDetails/streamline/eventGraph.tsx
+++ b/static/app/views/issueDetails/streamline/eventGraph.tsx
@@ -23,7 +23,7 @@ import {Button, type ButtonProps} from 'sentry/components/core/button';
 import {Flex, Grid, type FlexProps} from 'sentry/components/core/layout';
 import {useFlagSeries} from 'sentry/components/featureFlags/hooks/useFlagSeries';
 import {useFlagsInEvent} from 'sentry/components/featureFlags/hooks/useFlagsInEvent';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t, tct, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {ReactEchartsRef} from 'sentry/types/echarts';
@@ -496,7 +496,7 @@ export function EventGraph({
           <div />
         )}
         <LoadingChartContainer ref={chartContainerRef}>
-          <Placeholder height="96px" testId="event-graph-loading" />
+          <Placeholder height="96px" data-test-id="event-graph-loading" />
         </LoadingChartContainer>
       </Grid>
     );
diff --git a/static/app/views/issueDetails/streamline/eventGraphWidget.tsx b/static/app/views/issueDetails/streamline/eventGraphWidget.tsx
index 0534159d428a9f..ff3b949494c3cc 100644
--- a/static/app/views/issueDetails/streamline/eventGraphWidget.tsx
+++ b/static/app/views/issueDetails/streamline/eventGraphWidget.tsx
@@ -1,7 +1,9 @@
 import styled from '@emotion/styled';
 
+import {Container} from '@sentry/scraps/layout/container';
+
 import {useFetchGroupAndEvent} from 'sentry/components/featureFlags/hooks/useFetchGroupAndEvent';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import type {PageFilters} from 'sentry/types/core';
 import type {ReactEchartsRef} from 'sentry/types/echarts';
@@ -48,8 +50,8 @@ export default function EventGraphWidget({
 
   if (isError || !event || !groupData) {
     return (
-      <Container>
-        <Placeholder height="100%" error={t('Error loading chart')} />
+      <Container height="100%">
+        <ErrorPlaceholder height="100%">{t('Error loading chart')}</ErrorPlaceholder>
       </Container>
     );
   }
@@ -64,6 +66,11 @@ export default function EventGraphWidget({
   );
 }
 
+const ErrorPlaceholder = styled(Placeholder)`
+  color: ${p => p.theme.red200};
+  background-color: ${p => p.theme.red100};
+`;
+
 function EventGraphLoadedWidget({
   group,
   event,
@@ -99,8 +106,4 @@ function EventGraphLoadedWidget({
   );
 }
 
-const Container = styled('div')`
-  height: 100%;
-`;
-
 export const EVENT_GRAPH_WIDGET_ID = 'event-graph-widget';
diff --git a/static/app/views/issueDetails/streamline/issueTagsPreview.tsx b/static/app/views/issueDetails/streamline/issueTagsPreview.tsx
index 2c10be6d983ad7..c5b33a70bd647c 100644
--- a/static/app/views/issueDetails/streamline/issueTagsPreview.tsx
+++ b/static/app/views/issueDetails/streamline/issueTagsPreview.tsx
@@ -9,7 +9,7 @@ import {Link} from 'sentry/components/core/link';
 import {Text} from 'sentry/components/core/text';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import {DeviceName} from 'sentry/components/deviceName';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import TextOverflow from 'sentry/components/textOverflow';
 import {
   backend,
diff --git a/static/app/views/issueDetails/streamline/sidebar/seerDrawer.tsx b/static/app/views/issueDetails/streamline/sidebar/seerDrawer.tsx
index e87714ae4487e7..db5b964fe34ee6 100644
--- a/static/app/views/issueDetails/streamline/sidebar/seerDrawer.tsx
+++ b/static/app/views/issueDetails/streamline/sidebar/seerDrawer.tsx
@@ -20,7 +20,7 @@ import useDrawer from 'sentry/components/globalDrawer';
 import {DrawerBody, DrawerHeader} from 'sentry/components/globalDrawer/components';
 import {GroupSummary} from 'sentry/components/group/groupSummary';
 import HookOrDefault from 'sentry/components/hookOrDefault';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import {IconSettings} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
diff --git a/static/app/views/issueDetails/streamline/sidebar/seerSection.tsx b/static/app/views/issueDetails/streamline/sidebar/seerSection.tsx
index 14c7197893f033..b71bf0cb589d72 100644
--- a/static/app/views/issueDetails/streamline/sidebar/seerSection.tsx
+++ b/static/app/views/issueDetails/streamline/sidebar/seerSection.tsx
@@ -8,7 +8,7 @@ import {Button} from 'sentry/components/core/button';
 import {Text} from 'sentry/components/core/text';
 import {GroupSummary} from 'sentry/components/group/groupSummary';
 import {GroupSummaryWithAutofix} from 'sentry/components/group/groupSummaryWithAutofix';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconSeer} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/views/issueDetails/streamline/sidebar/seerSectionCtaButton.tsx b/static/app/views/issueDetails/streamline/sidebar/seerSectionCtaButton.tsx
index 579befb8030a6c..22498414f32238 100644
--- a/static/app/views/issueDetails/streamline/sidebar/seerSectionCtaButton.tsx
+++ b/static/app/views/issueDetails/streamline/sidebar/seerSectionCtaButton.tsx
@@ -12,7 +12,7 @@ import {
 import {useAiAutofix, useAutofixData} from 'sentry/components/events/autofix/useAutofix';
 import {getAutofixRunExists} from 'sentry/components/events/autofix/utils';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconChevron} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/views/issueDetails/traceTimeline/traceIssue.tsx b/static/app/views/issueDetails/traceTimeline/traceIssue.tsx
index 3d0dd8b184b697..da02693d74f0e3 100644
--- a/static/app/views/issueDetails/traceTimeline/traceIssue.tsx
+++ b/static/app/views/issueDetails/traceTimeline/traceIssue.tsx
@@ -5,7 +5,7 @@ import * as Sentry from '@sentry/react';
 import {useAnalyticsArea} from 'sentry/components/analyticsArea';
 import {Link} from 'sentry/components/core/link';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {space} from 'sentry/styles/space';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -65,7 +65,6 @@ export function TraceIssueEvent({event}: TraceIssueEventProps) {
             />
           ) : (
             <Placeholder
-              shape="rect"
               width={`${projectBadgeSize}px`}
               height={`${projectBadgeSize}px`}
             />
diff --git a/static/app/views/issueList/noGroupsHandler/index.tsx b/static/app/views/issueList/noGroupsHandler/index.tsx
index 92e2681808ddaf..3d2c86769a76cb 100644
--- a/static/app/views/issueList/noGroupsHandler/index.tsx
+++ b/static/app/views/issueList/noGroupsHandler/index.tsx
@@ -3,7 +3,7 @@ import {Component, lazy, Suspense} from 'react';
 import type {Client} from 'sentry/api';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
diff --git a/static/app/views/organizationStats/teamInsights/teamIssuesAge.tsx b/static/app/views/organizationStats/teamInsights/teamIssuesAge.tsx
index 5469023d6b5711..dbfcab97170046 100644
--- a/static/app/views/organizationStats/teamInsights/teamIssuesAge.tsx
+++ b/static/app/views/organizationStats/teamInsights/teamIssuesAge.tsx
@@ -9,7 +9,7 @@ import Count from 'sentry/components/count';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
 import LoadingError from 'sentry/components/loadingError';
 import {PanelTable} from 'sentry/components/panels/panelTable';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import TimeSince from 'sentry/components/timeSince';
 import {IconArrow} from 'sentry/icons';
 import {t} from 'sentry/locale';
diff --git a/static/app/views/organizationStats/teamInsights/teamIssuesBreakdown.tsx b/static/app/views/organizationStats/teamInsights/teamIssuesBreakdown.tsx
index abe7705844323a..fb439792ed18fe 100644
--- a/static/app/views/organizationStats/teamInsights/teamIssuesBreakdown.tsx
+++ b/static/app/views/organizationStats/teamInsights/teamIssuesBreakdown.tsx
@@ -8,7 +8,7 @@ import CollapsePanel, {COLLAPSE_COUNT} from 'sentry/components/collapsePanel';
 import LoadingError from 'sentry/components/loadingError';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import {PanelTable} from 'sentry/components/panels/panelTable';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconArrow} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import ProjectsStore from 'sentry/stores/projectsStore';
diff --git a/static/app/views/organizationStats/teamInsights/teamReleases.tsx b/static/app/views/organizationStats/teamInsights/teamReleases.tsx
index 64a8f3cd381fec..6b012c21bf8ede 100644
--- a/static/app/views/organizationStats/teamInsights/teamReleases.tsx
+++ b/static/app/views/organizationStats/teamInsights/teamReleases.tsx
@@ -12,7 +12,7 @@ import {Link} from 'sentry/components/core/link';
 import LoadingError from 'sentry/components/loadingError';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import {PanelTable} from 'sentry/components/panels/panelTable';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconArrow} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/views/organizationStats/teamInsights/teamStability.tsx b/static/app/views/organizationStats/teamInsights/teamStability.tsx
index 94972fc4c10761..c880cee136b43b 100644
--- a/static/app/views/organizationStats/teamInsights/teamStability.tsx
+++ b/static/app/views/organizationStats/teamInsights/teamStability.tsx
@@ -9,7 +9,7 @@ import {LinkButton} from 'sentry/components/core/button/linkButton';
 import LoadingError from 'sentry/components/loadingError';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import {PanelTable} from 'sentry/components/panels/panelTable';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconArrow} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/views/organizationStats/teamInsights/teamUnresolvedIssues.tsx b/static/app/views/organizationStats/teamInsights/teamUnresolvedIssues.tsx
index c33c53b274c346..a8d2b4de66e395 100644
--- a/static/app/views/organizationStats/teamInsights/teamUnresolvedIssues.tsx
+++ b/static/app/views/organizationStats/teamInsights/teamUnresolvedIssues.tsx
@@ -8,7 +8,7 @@ import CollapsePanel, {COLLAPSE_COUNT} from 'sentry/components/collapsePanel';
 import LoadingError from 'sentry/components/loadingError';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import {PanelTable} from 'sentry/components/panels/panelTable';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconArrow} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/views/organizationStats/usageChart/index.tsx b/static/app/views/organizationStats/usageChart/index.tsx
index ad92fff467fd63..a101d85bf57e9b 100644
--- a/static/app/views/organizationStats/usageChart/index.tsx
+++ b/static/app/views/organizationStats/usageChart/index.tsx
@@ -10,7 +10,7 @@ import barSeries from 'sentry/components/charts/series/barSeries';
 import {ChartContainer, HeaderTitleLegend} from 'sentry/components/charts/styles';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import Panel from 'sentry/components/panels/panel';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {DATA_CATEGORY_INFO} from 'sentry/constants';
 import {IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
diff --git a/static/app/views/performance/landing/chart/histogramChart.tsx b/static/app/views/performance/landing/chart/histogramChart.tsx
index 1eb2cd353b6627..e12fc00d7cee0f 100644
--- a/static/app/views/performance/landing/chart/histogramChart.tsx
+++ b/static/app/views/performance/landing/chart/histogramChart.tsx
@@ -7,7 +7,7 @@ import type {BarChartProps} from 'sentry/components/charts/barChart';
 import {BarChart} from 'sentry/components/charts/barChart';
 import BarChartZoom from 'sentry/components/charts/barChartZoom';
 import TransparentLoadingMask from 'sentry/components/charts/transparentLoadingMask';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Series} from 'sentry/types/echarts';
@@ -136,7 +136,7 @@ export function Chart(props: ChartProps) {
                       {...(disableZoom ? {} : zoomRenderProps)}
                     />
                   ),
-                  fixed: <Placeholder height="250px" testId="skeleton-ui" />,
+                  fixed: <Placeholder height="250px" data-test-id="skeleton-ui" />,
                 })}
               </MaskContainer>
             </BarChartContainer>
diff --git a/static/app/views/performance/landing/vitalsCards.tsx b/static/app/views/performance/landing/vitalsCards.tsx
index e9e984fac9a015..92e7980c7f467b 100644
--- a/static/app/views/performance/landing/vitalsCards.tsx
+++ b/static/app/views/performance/landing/vitalsCards.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import {Tooltip} from 'sentry/components/core/tooltip';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import toArray from 'sentry/utils/array/toArray';
diff --git a/static/app/views/performance/landing/widgets/components/performanceWidget.tsx b/static/app/views/performance/landing/widgets/components/performanceWidget.tsx
index 662771329fb96a..056946c336ef76 100644
--- a/static/app/views/performance/landing/widgets/components/performanceWidget.tsx
+++ b/static/app/views/performance/landing/widgets/components/performanceWidget.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import ErrorPanel from 'sentry/components/charts/errorPanel';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconWarning} from 'sentry/icons/iconWarning';
 import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
diff --git a/static/app/views/performance/newTraceDetails/traceHeader/styles.tsx b/static/app/views/performance/newTraceDetails/traceHeader/styles.tsx
index 4ac4d6d5f6442d..187d7a085e4f2d 100644
--- a/static/app/views/performance/newTraceDetails/traceHeader/styles.tsx
+++ b/static/app/views/performance/newTraceDetails/traceHeader/styles.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 import {Button} from 'sentry/components/core/button';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconMegaphone} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/views/performance/newTraceDetails/traceRow/traceLoadingRow.tsx b/static/app/views/performance/newTraceDetails/traceRow/traceLoadingRow.tsx
index da97f7e3c51e53..1d162d70be0293 100644
--- a/static/app/views/performance/newTraceDetails/traceRow/traceLoadingRow.tsx
+++ b/static/app/views/performance/newTraceDetails/traceRow/traceLoadingRow.tsx
@@ -65,7 +65,6 @@ export function TraceLoadingRow(props: {
             ) : null}
           </div>
           <Placeholder
-            className="Placeholder"
             height="12px"
             width={randomBetween(20, 80) + '%'}
             style={{
@@ -85,7 +84,6 @@ export function TraceLoadingRow(props: {
         }}
       >
         <Placeholder
-          className="Placeholder"
           height="12px"
           width={randomBetween(20, 80) + '%'}
           style={{
diff --git a/static/app/views/performance/transactionSummary/transactionOverview/durationChart/content.tsx b/static/app/views/performance/transactionSummary/transactionOverview/durationChart/content.tsx
index 499102b9ed994c..c3e43199277bff 100644
--- a/static/app/views/performance/transactionSummary/transactionOverview/durationChart/content.tsx
+++ b/static/app/views/performance/transactionSummary/transactionOverview/durationChart/content.tsx
@@ -9,7 +9,7 @@ import type {LineChartProps} from 'sentry/components/charts/lineChart';
 import ReleaseSeries from 'sentry/components/charts/releaseSeries';
 import TransitionChart from 'sentry/components/charts/transitionChart';
 import TransparentLoadingMask from 'sentry/components/charts/transparentLoadingMask';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconWarning} from 'sentry/icons';
 import type {Series} from 'sentry/types/echarts';
 import {
@@ -154,7 +154,7 @@ function Content({
                       series={[...series, ...releaseSeries]}
                     />
                   ),
-                  fixed: <Placeholder height="200px" testId="skeleton-ui" />,
+                  fixed: <Placeholder height="200px" data-test-id="skeleton-ui" />,
                 })}
               </TransitionChart>
             );
diff --git a/static/app/views/performance/transactionSummary/transactionOverview/index.spec.tsx b/static/app/views/performance/transactionSummary/transactionOverview/index.spec.tsx
index 475fc6ae960de8..4e2a19e35634f5 100644
--- a/static/app/views/performance/transactionSummary/transactionOverview/index.spec.tsx
+++ b/static/app/views/performance/transactionSummary/transactionOverview/index.spec.tsx
@@ -630,7 +630,9 @@ describe('Performance > TransactionSummary', () => {
 
       // Renders Apdex widget
       await screen.findByRole('heading', {name: 'Apdex'});
-      expect(await screen.findByTestId('apdex-summary-value')).toHaveTextContent('0.6');
+      await waitFor(() => {
+        expect(screen.getByTestId('apdex-summary-value')).toHaveTextContent('0.6');
+      });
 
       // Renders Failure Rate widget
       expect(screen.getByRole('heading', {name: 'Failure Rate'})).toBeInTheDocument();
diff --git a/static/app/views/performance/transactionSummary/transactionOverview/sidebarCharts.tsx b/static/app/views/performance/transactionSummary/transactionOverview/sidebarCharts.tsx
index 900ae7eee0737f..607bffe32217ed 100644
--- a/static/app/views/performance/transactionSummary/transactionOverview/sidebarCharts.tsx
+++ b/static/app/views/performance/transactionSummary/transactionOverview/sidebarCharts.tsx
@@ -11,7 +11,7 @@ import TransitionChart from 'sentry/components/charts/transitionChart';
 import TransparentLoadingMask from 'sentry/components/charts/transparentLoadingMask';
 import {getInterval} from 'sentry/components/charts/utils';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import {IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
@@ -126,7 +126,7 @@ function SidebarCharts({
                 value: (
                   <LineChart {...zoomRenderProps} {...chartOptions} series={series} />
                 ),
-                fixed: <Placeholder height="300px" testId="skeleton-ui" />,
+                fixed: <Placeholder height="300px" data-test-id="skeleton-ui" />,
               })}
             </TransitionChart>
           );
diff --git a/static/app/views/performance/transactionSummary/transactionOverview/statusBreakdown.tsx b/static/app/views/performance/transactionSummary/transactionOverview/statusBreakdown.tsx
index f0df47197e0e43..4df65e08d15232 100644
--- a/static/app/views/performance/transactionSummary/transactionOverview/statusBreakdown.tsx
+++ b/static/app/views/performance/transactionSummary/transactionOverview/statusBreakdown.tsx
@@ -6,7 +6,7 @@ import BreakdownBars from 'sentry/components/charts/breakdownBars';
 import ErrorPanel from 'sentry/components/charts/errorPanel';
 import {SectionHeading} from 'sentry/components/charts/styles';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import {IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
diff --git a/static/app/views/performance/transactionSummary/transactionOverview/trendChart/content.tsx b/static/app/views/performance/transactionSummary/transactionOverview/trendChart/content.tsx
index e5c736e686bd72..ef8743e9fabfa4 100644
--- a/static/app/views/performance/transactionSummary/transactionOverview/trendChart/content.tsx
+++ b/static/app/views/performance/transactionSummary/transactionOverview/trendChart/content.tsx
@@ -8,7 +8,7 @@ import {LineChart} from 'sentry/components/charts/lineChart';
 import ReleaseSeries from 'sentry/components/charts/releaseSeries';
 import TransitionChart from 'sentry/components/charts/transitionChart';
 import TransparentLoadingMask from 'sentry/components/charts/transparentLoadingMask';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Series} from 'sentry/types/echarts';
@@ -161,7 +161,7 @@ function Content({
                     ]}
                   />
                 ),
-                fixed: <Placeholder height="200px" testId="skeleton-ui" />,
+                fixed: <Placeholder height="200px" data-test-id="skeleton-ui" />,
               })}
             </TransitionChart>
           )}
diff --git a/static/app/views/performance/transactionSummary/transactionOverview/userStats.tsx b/static/app/views/performance/transactionSummary/transactionOverview/userStats.tsx
index ca0865ae828438..186d1cb1f13d1b 100644
--- a/static/app/views/performance/transactionSummary/transactionOverview/userStats.tsx
+++ b/static/app/views/performance/transactionSummary/transactionOverview/userStats.tsx
@@ -4,7 +4,7 @@ import type {Location, LocationDescriptor} from 'history';
 
 import {SectionHeading} from 'sentry/components/charts/styles';
 import {Link} from 'sentry/components/core/link';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import UserMisery from 'sentry/components/userMisery';
 import {IconOpen} from 'sentry/icons';
diff --git a/static/app/views/performance/transactionSummary/transactionOverview/vitalsChart/content.tsx b/static/app/views/performance/transactionSummary/transactionOverview/vitalsChart/content.tsx
index ccceb727c46362..efb66e4dd184ef 100644
--- a/static/app/views/performance/transactionSummary/transactionOverview/vitalsChart/content.tsx
+++ b/static/app/views/performance/transactionSummary/transactionOverview/vitalsChart/content.tsx
@@ -8,7 +8,7 @@ import {LineChart} from 'sentry/components/charts/lineChart';
 import ReleaseSeries from 'sentry/components/charts/releaseSeries';
 import TransitionChart from 'sentry/components/charts/transitionChart';
 import TransparentLoadingMask from 'sentry/components/charts/transparentLoadingMask';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconWarning} from 'sentry/icons';
 import type {Series} from 'sentry/types/echarts';
 import {
@@ -131,7 +131,7 @@ function Content({
                     series={[...series, ...releaseSeries]}
                   />
                 ),
-                fixed: <Placeholder height="200px" testId="skeleton-ui" />,
+                fixed: <Placeholder height="200px" data-test-id="skeleton-ui" />,
               })}
             </TransitionChart>
           )}
diff --git a/static/app/views/performance/transactionSummary/transactionTags/content.tsx b/static/app/views/performance/transactionSummary/transactionTags/content.tsx
index cda08c957cb50c..9a394e620b5156 100644
--- a/static/app/views/performance/transactionSummary/transactionTags/content.tsx
+++ b/static/app/views/performance/transactionSummary/transactionTags/content.tsx
@@ -11,7 +11,7 @@ import {EnvironmentPageFilter} from 'sentry/components/organizations/environment
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import {TransactionSearchQueryBuilder} from 'sentry/components/performance/transactionSearchQueryBuilder';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/views/performance/transactionSummary/transactionTags/tagsHeatMap.tsx b/static/app/views/performance/transactionSummary/transactionTags/tagsHeatMap.tsx
index b3a68fe8f847fe..c474fdeb1556a6 100644
--- a/static/app/views/performance/transactionSummary/transactionTags/tagsHeatMap.tsx
+++ b/static/app/views/performance/transactionSummary/transactionTags/tagsHeatMap.tsx
@@ -19,7 +19,7 @@ import MenuItem from 'sentry/components/menuItem';
 import {Overlay, PositionWrapper} from 'sentry/components/overlay';
 import Panel from 'sentry/components/panels/panel';
 import PerformanceDuration from 'sentry/components/performanceDuration';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import Truncate from 'sentry/components/truncate';
 import {t} from 'sentry/locale';
@@ -432,7 +432,7 @@ function TagsHeatMap(
                 {...chartOptions}
               />
             ),
-            fixed: <Placeholder height="290px" testId="skeleton-ui" />,
+            fixed: <Placeholder height="290px" data-test-id="skeleton-ui" />,
           })}
         </Fragment>
       </TransitionChart>
diff --git a/static/app/views/performance/transactionSummary/transactionVitals/vitalCard.tsx b/static/app/views/performance/transactionSummary/transactionVitals/vitalCard.tsx
index 088d75b6be6b99..3800dc40103312 100644
--- a/static/app/views/performance/transactionSummary/transactionVitals/vitalCard.tsx
+++ b/static/app/views/performance/transactionSummary/transactionVitals/vitalCard.tsx
@@ -13,7 +13,7 @@ import MarkLine from 'sentry/components/charts/components/markLine';
 import TransparentLoadingMask from 'sentry/components/charts/transparentLoadingMask';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {Flex} from 'sentry/components/core/layout';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
@@ -347,7 +347,7 @@ class VitalCard extends Component<Props, State> {
                   {...zoomRenderProps}
                 />
               ),
-              fixed: <Placeholder testId="skeleton-ui" height="200px" />,
+              fixed: <Placeholder data-test-id="skeleton-ui" height="200px" />,
             })}
           </Container>
         )}
diff --git a/static/app/views/preprod/buildComparison/buildComparison.tsx b/static/app/views/preprod/buildComparison/buildComparison.tsx
index f027cbfe0378c2..206c6d774078e6 100644
--- a/static/app/views/preprod/buildComparison/buildComparison.tsx
+++ b/static/app/views/preprod/buildComparison/buildComparison.tsx
@@ -1,10 +1,9 @@
-import {useTheme} from '@emotion/react';
-
 import {Alert} from '@sentry/scraps/alert';
+import {Container} from '@sentry/scraps/layout';
 
 import * as Layout from 'sentry/components/layouts/thirds';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import {useApiQuery, type UseApiQueryResult} from 'sentry/utils/queryClient';
@@ -18,7 +17,6 @@ import type {BuildDetailsApiResponse} from 'sentry/views/preprod/types/buildDeta
 
 export default function BuildComparison() {
   const organization = useOrganization();
-  const theme = useTheme();
   const params = useParams<{
     headArtifactId: string;
     // eslint-disable-next-line typescript-sort-keys/interface
@@ -46,11 +44,9 @@ export default function BuildComparison() {
       <SentryDocumentTitle title={t('Build comparison')}>
         <Layout.Page>
           <Layout.Header>
-            <Placeholder
-              height="20px"
-              width="200px"
-              style={{marginBottom: theme.space.md}}
-            />
+            <Container marginBottom="md">
+              <Placeholder height="20px" width="200px" />
+            </Container>
           </Layout.Header>
 
           <Layout.Body>
diff --git a/static/app/views/preprod/buildDetails/main/buildDetailsMainContent.tsx b/static/app/views/preprod/buildDetails/main/buildDetailsMainContent.tsx
index e8c8146fbcb171..6628599800a2c9 100644
--- a/static/app/views/preprod/buildDetails/main/buildDetailsMainContent.tsx
+++ b/static/app/views/preprod/buildDetails/main/buildDetailsMainContent.tsx
@@ -6,7 +6,7 @@ import {InputGroup} from '@sentry/scraps/input/inputGroup';
 import {Flex, Stack} from '@sentry/scraps/layout';
 import {SegmentedControl} from '@sentry/scraps/segmentedControl';
 
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconClose, IconGrid, IconRefresh, IconSearch} from 'sentry/icons';
 import {IconGraphCircle} from 'sentry/icons/iconGraphCircle';
 import {t} from 'sentry/locale';
@@ -110,7 +110,7 @@ export function BuildDetailsMainContent(props: BuildDetailsMainContentProps) {
       <Stack gap="lg" width="100%">
         <Flex width="100%" justify="between" align="center" gap="md">
           <Placeholder width="92px" height="40px" />
-          <Placeholder style={{flex: 1}} height="40px" />
+          <Placeholder flex={1} height="40px" />
         </Flex>
         <Placeholder width="100%" height="540px" />
         <Placeholder height="140px" />
diff --git a/static/app/views/preprod/buildDetails/sidebar/buildDetailsSidebarContent.tsx b/static/app/views/preprod/buildDetails/sidebar/buildDetailsSidebarContent.tsx
index bc6fd9a452362c..89cdc18f7c9681 100644
--- a/static/app/views/preprod/buildDetails/sidebar/buildDetailsSidebarContent.tsx
+++ b/static/app/views/preprod/buildDetails/sidebar/buildDetailsSidebarContent.tsx
@@ -1,13 +1,13 @@
 import styled from '@emotion/styled';
 
-import {Flex} from '@sentry/scraps/layout';
+import {Container, Flex} from '@sentry/scraps/layout';
 import {ExternalLink} from '@sentry/scraps/link';
 
 import {
   KeyValueData,
   type KeyValueDataContentProps,
 } from 'sentry/components/keyValueData';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {space} from 'sentry/styles/space';
 import {BuildDetailsSidebarAppInfo} from 'sentry/views/preprod/buildDetails/sidebar/buildDetailsSidebarAppInfo';
 import type {BuildDetailsApiResponse} from 'sentry/views/preprod/types/buildDetailsTypes';
@@ -179,7 +179,9 @@ function SidebarLoadingSkeleton(props: {['data-testid']: string}) {
 
       {/* VCS info skeleton - matches KeyValueData.Card structure */}
       <SkeletonCard>
-        <Placeholder width="80px" height="18px" style={{marginBottom: space(3)}} />
+        <Container marginBottom="2xl">
+          <Placeholder width="80px" height="18px" />
+        </Container>
         <Flex direction="column" gap="md">
           <Flex justify="between">
             <Placeholder width="40px" height="14px" />
diff --git a/static/app/views/prevent/tokens/repoTokenTable/repoTokenTable.tsx b/static/app/views/prevent/tokens/repoTokenTable/repoTokenTable.tsx
index 877cee45b2ec4a..3bcf12c49a1a6f 100644
--- a/static/app/views/prevent/tokens/repoTokenTable/repoTokenTable.tsx
+++ b/static/app/views/prevent/tokens/repoTokenTable/repoTokenTable.tsx
@@ -108,7 +108,7 @@ export default function RepoTokenTable({response, sort}: Props) {
   const navigate = useNavigate();
 
   const handleSort = (field: 'name') => {
-    const {cursor, navigation, ...queryWithoutPagination} = location.query;
+    const {_cursor, _navigation, ...queryWithoutPagination} = location.query;
 
     const newQuery = {...queryWithoutPagination};
 
diff --git a/static/app/views/projectDetail/projectCharts.tsx b/static/app/views/projectDetail/projectCharts.tsx
index ed48205ae69eff..23e1fc089dda9e 100644
--- a/static/app/views/projectDetail/projectCharts.tsx
+++ b/static/app/views/projectDetail/projectCharts.tsx
@@ -22,7 +22,7 @@ import {
   TWO_WEEKS,
 } from 'sentry/components/charts/utils';
 import Panel from 'sentry/components/panels/panel';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import type {SelectValue} from 'sentry/types/core';
 import type {Organization} from 'sentry/types/organization';
diff --git a/static/app/views/projectDetail/projectLatestAlerts.tsx b/static/app/views/projectDetail/projectLatestAlerts.tsx
index 42448705129e0f..c9741b87074d00 100644
--- a/static/app/views/projectDetail/projectLatestAlerts.tsx
+++ b/static/app/views/projectDetail/projectLatestAlerts.tsx
@@ -7,7 +7,7 @@ import {AlertBadge} from 'sentry/components/core/badge/alertBadge';
 import {Link} from 'sentry/components/core/link';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
 import LoadingError from 'sentry/components/loadingError';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import TimeSince from 'sentry/components/timeSince';
 import {URL_PARAM} from 'sentry/constants/pageFilters';
 import {IconCheckmark, IconExclamation, IconFire, IconOpen} from 'sentry/icons';
diff --git a/static/app/views/projectDetail/projectLatestReleases.tsx b/static/app/views/projectDetail/projectLatestReleases.tsx
index 29b33b4809b479..7a39c3cf109947 100644
--- a/static/app/views/projectDetail/projectLatestReleases.tsx
+++ b/static/app/views/projectDetail/projectLatestReleases.tsx
@@ -7,7 +7,7 @@ import {SectionHeading} from 'sentry/components/charts/styles';
 import {DateTime} from 'sentry/components/dateTime';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
 import LoadingError from 'sentry/components/loadingError';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import TextOverflow from 'sentry/components/textOverflow';
 import Version from 'sentry/components/version';
 import {URL_PARAM} from 'sentry/constants/pageFilters';
diff --git a/static/app/views/projectDetail/projectTeamAccess.tsx b/static/app/views/projectDetail/projectTeamAccess.tsx
index b37bc1098f4db5..5d2cb44f047081 100644
--- a/static/app/views/projectDetail/projectTeamAccess.tsx
+++ b/static/app/views/projectDetail/projectTeamAccess.tsx
@@ -6,7 +6,7 @@ import {Button} from 'sentry/components/core/button';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {Link} from 'sentry/components/core/link';
 import IdBadge from 'sentry/components/idBadge';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconOpen} from 'sentry/icons';
 import {t, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/views/projectsDashboard/projectCard.tsx b/static/app/views/projectsDashboard/projectCard.tsx
index fe9e695159da1c..f55f2fa0dfa14a 100644
--- a/static/app/views/projectsDashboard/projectCard.tsx
+++ b/static/app/views/projectsDashboard/projectCard.tsx
@@ -8,7 +8,7 @@ import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {Link} from 'sentry/components/core/link';
 import IdBadge from 'sentry/components/idBadge';
 import Panel from 'sentry/components/panels/panel';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import BookmarkStar from 'sentry/components/projects/bookmarkStar';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import {
diff --git a/static/app/views/releases/detail/overview/releaseComparisonChart/releaseComparisonChartRow.tsx b/static/app/views/releases/detail/overview/releaseComparisonChart/releaseComparisonChartRow.tsx
index 7c7ac3855dc6fd..563f6daa565a7d 100644
--- a/static/app/views/releases/detail/overview/releaseComparisonChart/releaseComparisonChartRow.tsx
+++ b/static/app/views/releases/detail/overview/releaseComparisonChart/releaseComparisonChartRow.tsx
@@ -6,7 +6,7 @@ import {Flex} from 'sentry/components/core/layout/flex';
 import {Radio} from 'sentry/components/core/radio';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import NotAvailable from 'sentry/components/notAvailable';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconChevron} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/views/releases/drawer/commitsFilesSection.tsx b/static/app/views/releases/drawer/commitsFilesSection.tsx
index 9d3e212f89d70c..d94a581ba9a612 100644
--- a/static/app/views/releases/drawer/commitsFilesSection.tsx
+++ b/static/app/views/releases/drawer/commitsFilesSection.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import {Badge} from 'sentry/components/core/badge';
 import {TabList, TabPanels, Tabs} from 'sentry/components/core/tabs';
 import LoadingError from 'sentry/components/loadingError';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {ReleaseMeta} from 'sentry/types/release';
diff --git a/static/app/views/releases/drawer/commitsList.tsx b/static/app/views/releases/drawer/commitsList.tsx
index 0cae75f1a18930..66829b5d824b1a 100644
--- a/static/app/views/releases/drawer/commitsList.tsx
+++ b/static/app/views/releases/drawer/commitsList.tsx
@@ -6,7 +6,7 @@ import Pagination from 'sentry/components/pagination';
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
 import PanelHeader from 'sentry/components/panels/panelHeader';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Repository} from 'sentry/types/integrations';
diff --git a/static/app/views/releases/drawer/deploysCard.tsx b/static/app/views/releases/drawer/deploysCard.tsx
index 4cb23e55b63e1d..382fe1d8387f09 100644
--- a/static/app/views/releases/drawer/deploysCard.tsx
+++ b/static/app/views/releases/drawer/deploysCard.tsx
@@ -4,7 +4,7 @@ import {DateTime} from 'sentry/components/dateTime';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
 import {Card, KeyValueData} from 'sentry/components/keyValueData';
 import LoadingError from 'sentry/components/loadingError';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import {useReleaseDeploys} from 'sentry/views/releases/utils/useReleaseDeploys';
 
diff --git a/static/app/views/releases/drawer/filesChangedList.tsx b/static/app/views/releases/drawer/filesChangedList.tsx
index 67469692f24424..bdc34549bcdecc 100644
--- a/static/app/views/releases/drawer/filesChangedList.tsx
+++ b/static/app/views/releases/drawer/filesChangedList.tsx
@@ -6,7 +6,7 @@ import Pagination from 'sentry/components/pagination';
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
 import PanelHeader from 'sentry/components/panels/panelHeader';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Repository} from 'sentry/types/integrations';
diff --git a/static/app/views/releases/drawer/generalCard.tsx b/static/app/views/releases/drawer/generalCard.tsx
index e9e774041fd976..37677f0ca48316 100644
--- a/static/app/views/releases/drawer/generalCard.tsx
+++ b/static/app/views/releases/drawer/generalCard.tsx
@@ -5,7 +5,7 @@ import Count from 'sentry/components/count';
 import {DateTime} from 'sentry/components/dateTime';
 import {Card} from 'sentry/components/keyValueData';
 import LoadingError from 'sentry/components/loadingError';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import TimeSince from 'sentry/components/timeSince';
 import {t, tn} from 'sentry/locale';
 import type {ReleaseMeta} from 'sentry/types/release';
diff --git a/static/app/views/releases/drawer/releasesDrawerFeatureFlagsTable.tsx b/static/app/views/releases/drawer/releasesDrawerFeatureFlagsTable.tsx
index cc724f0c675906..5551e2beb0a9c3 100644
--- a/static/app/views/releases/drawer/releasesDrawerFeatureFlagsTable.tsx
+++ b/static/app/views/releases/drawer/releasesDrawerFeatureFlagsTable.tsx
@@ -6,7 +6,7 @@ import {FeatureFlagsLogTable} from 'sentry/components/featureFlags/featureFlagsL
 import {useFlagsInEventPaginated} from 'sentry/components/featureFlags/hooks/useFlagsInEvent';
 import type {RawFlag} from 'sentry/components/featureFlags/utils';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import type {GridColumnOrder} from 'sentry/components/tables/gridEditable';
 import {t} from 'sentry/locale';
 import type {PageFilters} from 'sentry/types/core';
diff --git a/static/app/views/releases/list/releaseCard/releaseCardProjectRow.tsx b/static/app/views/releases/list/releaseCard/releaseCardProjectRow.tsx
index 912f393175757c..0ac05dab28a3a4 100644
--- a/static/app/views/releases/list/releaseCard/releaseCardProjectRow.tsx
+++ b/static/app/views/releases/list/releaseCard/releaseCardProjectRow.tsx
@@ -15,7 +15,7 @@ import ProjectBadge from 'sentry/components/idBadge/projectBadge';
 import NotAvailable from 'sentry/components/notAvailable';
 import {extractSelectionParameters} from 'sentry/components/organizations/pageFilters/utils';
 import PanelItem from 'sentry/components/panels/panelItem';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconCheckmark, IconFire, IconWarning} from 'sentry/icons';
 import {t, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/views/releases/list/releasesAdoptionChart.tsx b/static/app/views/releases/list/releasesAdoptionChart.tsx
index 341f84ee00dc42..354c67c50b4f73 100644
--- a/static/app/views/releases/list/releasesAdoptionChart.tsx
+++ b/static/app/views/releases/list/releasesAdoptionChart.tsx
@@ -32,7 +32,7 @@ import {
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
 import PanelFooter from 'sentry/components/panels/panelFooter';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {URL_PARAM} from 'sentry/constants/pageFilters';
 import {t, tct, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/views/replays/detail/breadcrumbs/index.tsx b/static/app/views/replays/detail/breadcrumbs/index.tsx
index 455561ead80df7..6149b01466993c 100644
--- a/static/app/views/replays/detail/breadcrumbs/index.tsx
+++ b/static/app/views/replays/detail/breadcrumbs/index.tsx
@@ -3,7 +3,7 @@ import type {ListRowProps} from 'react-virtualized';
 import {AutoSizer, CellMeasurer, List as ReactVirtualizedList} from 'react-virtualized';
 
 import {Flex} from 'sentry/components/core/layout/flex';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import JumpButtons from 'sentry/components/replays/jumpButtons';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import useJumpButtons from 'sentry/components/replays/useJumpButtons';
diff --git a/static/app/views/replays/detail/browserOSIcons.tsx b/static/app/views/replays/detail/browserOSIcons.tsx
index 403bd99323118a..1e6462673b4ec2 100644
--- a/static/app/views/replays/detail/browserOSIcons.tsx
+++ b/static/app/views/replays/detail/browserOSIcons.tsx
@@ -4,7 +4,7 @@ import {PlatformIcon} from 'platformicons';
 
 import {Flex} from 'sentry/components/core/layout';
 import {Tooltip} from 'sentry/components/core/tooltip';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import CountTooltipContent from 'sentry/components/replays/countTooltipContent';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/views/replays/detail/console/index.tsx b/static/app/views/replays/detail/console/index.tsx
index 665a65e263b413..032824f7cfba8a 100644
--- a/static/app/views/replays/detail/console/index.tsx
+++ b/static/app/views/replays/detail/console/index.tsx
@@ -3,7 +3,7 @@ import type {ListRowProps} from 'react-virtualized';
 import {AutoSizer, CellMeasurer, List as ReactVirtualizedList} from 'react-virtualized';
 
 import {Flex} from 'sentry/components/core/layout/flex';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import JumpButtons from 'sentry/components/replays/jumpButtons';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import useJumpButtons from 'sentry/components/replays/useJumpButtons';
diff --git a/static/app/views/replays/detail/errorList/index.tsx b/static/app/views/replays/detail/errorList/index.tsx
index 1a87326762e926..50c0f656d4df4d 100644
--- a/static/app/views/replays/detail/errorList/index.tsx
+++ b/static/app/views/replays/detail/errorList/index.tsx
@@ -4,7 +4,7 @@ import {AutoSizer, CellMeasurer, MultiGrid} from 'react-virtualized';
 import styled from '@emotion/styled';
 
 import {Flex} from 'sentry/components/core/layout/flex';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import JumpButtons from 'sentry/components/replays/jumpButtons';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import useJumpButtons from 'sentry/components/replays/useJumpButtons';
diff --git a/static/app/views/replays/detail/header/replayDetailsHeaderActions.tsx b/static/app/views/replays/detail/header/replayDetailsHeaderActions.tsx
index 40b601fbebd951..00954a2b95ee13 100644
--- a/static/app/views/replays/detail/header/replayDetailsHeaderActions.tsx
+++ b/static/app/views/replays/detail/header/replayDetailsHeaderActions.tsx
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 import FeedbackWidgetButton from 'sentry/components/feedback/widget/feedbackWidgetButton';
 import * as Layout from 'sentry/components/layouts/thirds';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import ConfigureReplayCard from 'sentry/components/replays/header/configureReplayCard';
 import FeedbackButton from 'sentry/components/replays/header/feedbackButton';
 import ReplayLoadingState from 'sentry/components/replays/player/replayLoadingState';
diff --git a/static/app/views/replays/detail/header/replayDetailsMetadata.tsx b/static/app/views/replays/detail/header/replayDetailsMetadata.tsx
index 747fb52e1f68f9..c7c7b6a0244785 100644
--- a/static/app/views/replays/detail/header/replayDetailsMetadata.tsx
+++ b/static/app/views/replays/detail/header/replayDetailsMetadata.tsx
@@ -1,4 +1,4 @@
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import ReplayMetaData from 'sentry/components/replays/header/replayMetaData';
 import ReplayLoadingState from 'sentry/components/replays/player/replayLoadingState';
 import type useLoadReplayReader from 'sentry/utils/replays/hooks/useLoadReplayReader';
diff --git a/static/app/views/replays/detail/header/replayDetailsPageBreadcrumbs.tsx b/static/app/views/replays/detail/header/replayDetailsPageBreadcrumbs.tsx
index 626e803804b67f..02f228ddcf1ec0 100644
--- a/static/app/views/replays/detail/header/replayDetailsPageBreadcrumbs.tsx
+++ b/static/app/views/replays/detail/header/replayDetailsPageBreadcrumbs.tsx
@@ -6,7 +6,7 @@ import {Button} from 'sentry/components/core/button';
 import {Flex} from 'sentry/components/core/layout';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import {IconCopy} from 'sentry/icons';
 import {t} from 'sentry/locale';
diff --git a/static/app/views/replays/detail/header/replayDetailsUserBadge.tsx b/static/app/views/replays/detail/header/replayDetailsUserBadge.tsx
index bc11d03bcc1382..7a6b8a8b21bb55 100644
--- a/static/app/views/replays/detail/header/replayDetailsUserBadge.tsx
+++ b/static/app/views/replays/detail/header/replayDetailsUserBadge.tsx
@@ -8,7 +8,7 @@ import {Button} from 'sentry/components/core/button';
 import {Link} from 'sentry/components/core/link';
 import UserBadge from 'sentry/components/idBadge/userBadge';
 import * as Layout from 'sentry/components/layouts/thirds';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import ReplayLoadingState from 'sentry/components/replays/player/replayLoadingState';
 import {
   getLiveDurationMs,
diff --git a/static/app/views/replays/detail/layout/replayLayout.tsx b/static/app/views/replays/detail/layout/replayLayout.tsx
index ad4bf320cc1b93..96bf50a33f7d33 100644
--- a/static/app/views/replays/detail/layout/replayLayout.tsx
+++ b/static/app/views/replays/detail/layout/replayLayout.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import {TooltipContext} from 'sentry/components/core/tooltip';
 import ErrorBoundary from 'sentry/components/errorBoundary';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import ReplayController from 'sentry/components/replays/replayController';
 import ReplayView from 'sentry/components/replays/replayView';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/views/replays/detail/memoryPanel/index.tsx b/static/app/views/replays/detail/memoryPanel/index.tsx
index 8d2f3468a2777e..a6c42b19efdda7 100644
--- a/static/app/views/replays/detail/memoryPanel/index.tsx
+++ b/static/app/views/replays/detail/memoryPanel/index.tsx
@@ -1,7 +1,7 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
diff --git a/static/app/views/replays/detail/network/index.tsx b/static/app/views/replays/detail/network/index.tsx
index 813d2575a0dc28..b0b5e977879090 100644
--- a/static/app/views/replays/detail/network/index.tsx
+++ b/static/app/views/replays/detail/network/index.tsx
@@ -4,7 +4,7 @@ import {AutoSizer, CellMeasurer, MultiGrid} from 'react-virtualized';
 
 import {Flex} from 'sentry/components/core/layout/flex';
 import {ExternalLink} from 'sentry/components/core/link';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import JumpButtons from 'sentry/components/replays/jumpButtons';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import useJumpButtons from 'sentry/components/replays/useJumpButtons';
diff --git a/static/app/views/replays/detail/ourlogs/index.tsx b/static/app/views/replays/detail/ourlogs/index.tsx
index e84929a354566d..13ae3228e1fa42 100644
--- a/static/app/views/replays/detail/ourlogs/index.tsx
+++ b/static/app/views/replays/detail/ourlogs/index.tsx
@@ -1,7 +1,7 @@
 import {useCallback, useMemo, useRef} from 'react';
 import styled from '@emotion/styled';
 
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import {GridBody} from 'sentry/components/tables/gridEditable/styles';
 import {t} from 'sentry/locale';
diff --git a/static/app/views/replays/detail/replayViewScale.tsx b/static/app/views/replays/detail/replayViewScale.tsx
index 0d8fd5d3370044..424b3407e35530 100644
--- a/static/app/views/replays/detail/replayViewScale.tsx
+++ b/static/app/views/replays/detail/replayViewScale.tsx
@@ -1,5 +1,5 @@
 import {Tooltip} from 'sentry/components/core/tooltip';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import CountTooltipContent from 'sentry/components/replays/countTooltipContent';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import {IconRuler} from 'sentry/icons/iconRuler';
diff --git a/static/app/views/replays/detail/tagPanel/index.tsx b/static/app/views/replays/detail/tagPanel/index.tsx
index 130891984a2e61..cd1f1bb171780f 100644
--- a/static/app/views/replays/detail/tagPanel/index.tsx
+++ b/static/app/views/replays/detail/tagPanel/index.tsx
@@ -4,7 +4,7 @@ import type {LocationDescriptor} from 'history';
 
 import EmptyMessage from 'sentry/components/emptyMessage';
 import {KeyValueTable} from 'sentry/components/keyValueTable';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import ReplayTagsTableRow from 'sentry/components/replays/replayTagsTableRow';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -65,7 +65,9 @@ export default function TagPanel() {
   );
 
   if (!replayRecord) {
-    return <PaddedPlaceholder testId="replay-tags-loading-placeholder" height="100%" />;
+    return (
+      <PaddedPlaceholder data-test-id="replay-tags-loading-placeholder" height="100%" />
+    );
   }
   const filteredTags = Object.entries(items);
 
diff --git a/static/app/views/replays/detail/trace/trace.tsx b/static/app/views/replays/detail/trace/trace.tsx
index 2cc66f2ab80dd7..f92ccc14489375 100644
--- a/static/app/views/replays/detail/trace/trace.tsx
+++ b/static/app/views/replays/detail/trace/trace.tsx
@@ -2,7 +2,7 @@ import {useMemo} from 'react';
 import styled from '@emotion/styled';
 
 import Loading from 'sentry/components/loadingIndicator';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconSad} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
diff --git a/static/app/views/replays/selectors/deadRageSelectorCards.tsx b/static/app/views/replays/selectors/deadRageSelectorCards.tsx
index 53d6860ed35fd8..64a5ac3840e623 100644
--- a/static/app/views/replays/selectors/deadRageSelectorCards.tsx
+++ b/static/app/views/replays/selectors/deadRageSelectorCards.tsx
@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import Accordion from 'sentry/components/container/accordion';
 import {Flex, type FlexProps} from 'sentry/components/core/layout';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import TextOverflow from 'sentry/components/textOverflow';
 import {IconCursorArrow, IconSearch} from 'sentry/icons';
diff --git a/static/app/views/settings/account/notifications/notificationSettings.tsx b/static/app/views/settings/account/notifications/notificationSettings.tsx
index c6dc84b38b6795..95ffdddc068283 100644
--- a/static/app/views/settings/account/notifications/notificationSettings.tsx
+++ b/static/app/views/settings/account/notifications/notificationSettings.tsx
@@ -11,7 +11,7 @@ import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
 import PanelHeader from 'sentry/components/panels/panelHeader';
 import PanelItem from 'sentry/components/panels/panelItem';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {IconMail, IconSettings} from 'sentry/icons';
 import {t} from 'sentry/locale';
diff --git a/static/app/views/settings/organizationAuditLog/auditLogList.tsx b/static/app/views/settings/organizationAuditLog/auditLogList.tsx
index 2e1821902e3053..90af8e94a11897 100644
--- a/static/app/views/settings/organizationAuditLog/auditLogList.tsx
+++ b/static/app/views/settings/organizationAuditLog/auditLogList.tsx
@@ -1,6 +1,8 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
+import {Container} from '@sentry/scraps/layout';
+
 import {ActivityAvatar} from 'sentry/components/activity/item/avatar';
 import {UserAvatar} from 'sentry/components/core/avatar/userAvatar';
 import {Tag} from 'sentry/components/core/badge/tag';
@@ -44,7 +46,11 @@ const getAvatarDisplay = (logEntryUser: User | undefined) => {
     logEntryUser?.isSuperuser ||
     (logEntryUser?.name === 'Sentry' && logEntryUser?.email === undefined)
   ) {
-    return <SentryAvatar type="system" size={36} />;
+    return (
+      <Container marginRight="md">
+        <ActivityAvatar type="system" size={36} />
+      </Container>
+    );
   }
   // Display user's avatar for non-superusers-initiated events
   if (logEntryUser !== undefined) {
@@ -393,10 +399,6 @@ function AuditLogList({
   );
 }
 
-const SentryAvatar = styled(ActivityAvatar)`
-  margin-right: ${space(1)};
-`;
-
 const Name = styled('strong')`
   font-size: ${p => p.theme.fontSize.md};
 `;
diff --git a/static/app/views/settings/organizationAuthTokens/authTokenRow.tsx b/static/app/views/settings/organizationAuthTokens/authTokenRow.tsx
index d13f3a9a519dda..038410640f9d64 100644
--- a/static/app/views/settings/organizationAuthTokens/authTokenRow.tsx
+++ b/static/app/views/settings/organizationAuthTokens/authTokenRow.tsx
@@ -5,7 +5,7 @@ import Confirm from 'sentry/components/confirm';
 import {Button} from 'sentry/components/core/button';
 import {Link} from 'sentry/components/core/link';
 import {Tooltip} from 'sentry/components/core/tooltip';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import TimeSince from 'sentry/components/timeSince';
 import {IconDelete} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
diff --git a/static/app/views/settings/organizationProjects/index.tsx b/static/app/views/settings/organizationProjects/index.tsx
index 987c853a94fd81..882abd0f294c20 100644
--- a/static/app/views/settings/organizationProjects/index.tsx
+++ b/static/app/views/settings/organizationProjects/index.tsx
@@ -10,7 +10,7 @@ import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
 import PanelHeader from 'sentry/components/panels/panelHeader';
 import PanelItem from 'sentry/components/panels/panelItem';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import SearchBar from 'sentry/components/searchBar';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {DEFAULT_DEBOUNCE_DURATION} from 'sentry/constants';
diff --git a/static/app/views/settings/project/projectFilters/projectFiltersChart.tsx b/static/app/views/settings/project/projectFilters/projectFiltersChart.tsx
index e0448eedbd4167..8a63184eb9ea7a 100644
--- a/static/app/views/settings/project/projectFilters/projectFiltersChart.tsx
+++ b/static/app/views/settings/project/projectFilters/projectFiltersChart.tsx
@@ -8,7 +8,7 @@ import LoadingError from 'sentry/components/loadingError';
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
 import PanelHeader from 'sentry/components/panels/panelHeader';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import type {Project} from 'sentry/types/project';
 import {useApiQuery} from 'sentry/utils/queryClient';
diff --git a/static/app/views/settings/project/projectKeys/details/keyStats.tsx b/static/app/views/settings/project/projectKeys/details/keyStats.tsx
index 7c3f2b91a13b0a..1501fefc7dfeab 100644
--- a/static/app/views/settings/project/projectKeys/details/keyStats.tsx
+++ b/static/app/views/settings/project/projectKeys/details/keyStats.tsx
@@ -8,7 +8,7 @@ import LoadingError from 'sentry/components/loadingError';
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
 import PanelHeader from 'sentry/components/panels/panelHeader';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import type {Series} from 'sentry/types/echarts';
 import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
diff --git a/static/app/views/settings/projectSeer/index.tsx b/static/app/views/settings/projectSeer/index.tsx
index d53d90d12c2fa2..e51cff0d7846dd 100644
--- a/static/app/views/settings/projectSeer/index.tsx
+++ b/static/app/views/settings/projectSeer/index.tsx
@@ -16,7 +16,7 @@ import type {FieldObject, JsonFormObject} from 'sentry/components/forms/types';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import ExternalLink from 'sentry/components/links/externalLink';
 import {NoAccess} from 'sentry/components/noAccess';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t, tct} from 'sentry/locale';
 import ProjectsStore from 'sentry/stores/projectsStore';
diff --git a/static/gsApp/components/profiling/profilingUpgradeModal.tsx b/static/gsApp/components/profiling/profilingUpgradeModal.tsx
index a987a66cdbd1b9..b825c76e41803f 100644
--- a/static/gsApp/components/profiling/profilingUpgradeModal.tsx
+++ b/static/gsApp/components/profiling/profilingUpgradeModal.tsx
@@ -14,7 +14,7 @@ import ErrorBoundary from 'sentry/components/errorBoundary';
 import HighlightModalContainer from 'sentry/components/highlightModalContainer';
 import List from 'sentry/components/list';
 import ListItem from 'sentry/components/list/listItem';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import OnboardingDrawerStore, {
   OnboardingDrawerKey,
diff --git a/static/gsApp/views/amCheckout/cart.tsx b/static/gsApp/views/amCheckout/cart.tsx
index 78770ee2c0a806..b2c3325fe62113 100644
--- a/static/gsApp/views/amCheckout/cart.tsx
+++ b/static/gsApp/views/amCheckout/cart.tsx
@@ -10,7 +10,7 @@ import {Button} from 'sentry/components/core/button';
 import {Flex, Stack} from 'sentry/components/core/layout';
 import {Heading, Text} from 'sentry/components/core/text';
 import {Tooltip} from 'sentry/components/core/tooltip';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconChevron, IconLightning, IconLock, IconSentry} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {DataCategory} from 'sentry/types/core';
diff --git a/static/gsApp/views/seerAutomation/index.tsx b/static/gsApp/views/seerAutomation/index.tsx
index ddc698563da609..72fadead660065 100644
--- a/static/gsApp/views/seerAutomation/index.tsx
+++ b/static/gsApp/views/seerAutomation/index.tsx
@@ -5,7 +5,7 @@ import {useOrganizationSeerSetup} from 'sentry/components/events/autofix/useOrga
 import ExternalLink from 'sentry/components/links/externalLink';
 import {NoAccess} from 'sentry/components/noAccess';
 import NoProjectMessage from 'sentry/components/noProjectMessage';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t, tct} from 'sentry/locale';
 import {DataCategoryExact} from 'sentry/types/core';
diff --git a/static/gsApp/views/seerAutomation/seerAutomationProjectList.tsx b/static/gsApp/views/seerAutomation/seerAutomationProjectList.tsx
index 642451c9234aa3..d601c9615078ce 100644
--- a/static/gsApp/views/seerAutomation/seerAutomationProjectList.tsx
+++ b/static/gsApp/views/seerAutomation/seerAutomationProjectList.tsx
@@ -20,7 +20,7 @@ import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
 import PanelHeader from 'sentry/components/panels/panelHeader';
 import PanelItem from 'sentry/components/panels/panelItem';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import SearchBar from 'sentry/components/searchBar';
 import {IconChevron} from 'sentry/icons';
 import {t} from 'sentry/locale';
diff --git a/static/gsApp/views/spikeProtection/spikeProtectionHistoryTable.tsx b/static/gsApp/views/spikeProtection/spikeProtectionHistoryTable.tsx
index 9230d673f3cec6..ae86aafe579f32 100644
--- a/static/gsApp/views/spikeProtection/spikeProtectionHistoryTable.tsx
+++ b/static/gsApp/views/spikeProtection/spikeProtectionHistoryTable.tsx
@@ -10,7 +10,7 @@ import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
 import Panel from 'sentry/components/panels/panel';
 import {PanelTable} from 'sentry/components/panels/panelTable';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconSettings} from 'sentry/icons';
 import {IconTelescope} from 'sentry/icons/iconTelescope';
 import {t, tct} from 'sentry/locale';
diff --git a/static/gsApp/views/subscriptionPage/headerCards/billingInfoCard.tsx b/static/gsApp/views/subscriptionPage/headerCards/billingInfoCard.tsx
index 5b69b833d99ed3..53b3a253d1aaff 100644
--- a/static/gsApp/views/subscriptionPage/headerCards/billingInfoCard.tsx
+++ b/static/gsApp/views/subscriptionPage/headerCards/billingInfoCard.tsx
@@ -1,7 +1,7 @@
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {Container, Flex} from 'sentry/components/core/layout';
 import {Text} from 'sentry/components/core/text';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t, tct} from 'sentry/locale';
 import type {Organization} from 'sentry/types/organization';
 import {useNavContext} from 'sentry/views/nav/context';
diff --git a/static/gsApp/views/subscriptionPage/headerCards/nextBillCard.tsx b/static/gsApp/views/subscriptionPage/headerCards/nextBillCard.tsx
index e10bbc560ccc55..f70f403bca2351 100644
--- a/static/gsApp/views/subscriptionPage/headerCards/nextBillCard.tsx
+++ b/static/gsApp/views/subscriptionPage/headerCards/nextBillCard.tsx
@@ -4,7 +4,7 @@ import {Alert} from 'sentry/components/core/alert';
 import {Tag} from 'sentry/components/core/badge/tag';
 import {Flex} from 'sentry/components/core/layout';
 import {Heading, Text} from 'sentry/components/core/text';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t, tct} from 'sentry/locale';
 import type {Organization} from 'sentry/types/organization';
 import getDaysSinceDate from 'sentry/utils/getDaysSinceDate';
@@ -98,7 +98,7 @@ function NextBillCard({
           )}
         </Flex>,
         isLoading ? (
-          <Placeholder style={{flexGrow: 1}} />
+          <Placeholder flexGrow={1} />
         ) : isError ? (
           <Alert type="error">
             {t('Could not compute next bill. Please try again later.')}
diff --git a/static/gsApp/views/subscriptionPage/usageLog.tsx b/static/gsApp/views/subscriptionPage/usageLog.tsx
index e39c5b135eae5d..822efa307c518d 100644
--- a/static/gsApp/views/subscriptionPage/usageLog.tsx
+++ b/static/gsApp/views/subscriptionPage/usageLog.tsx
@@ -12,7 +12,7 @@ import {DateTime} from 'sentry/components/dateTime';
 import LoadingError from 'sentry/components/loadingError';
 import type {CursorHandler} from 'sentry/components/pagination';
 import Pagination from 'sentry/components/pagination';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {Timeline} from 'sentry/components/timeline';
 import {IconCircleFill} from 'sentry/icons';