fix(replay): lower number of placeholder rows in new issues table in releases drawer

static/app/components/issues/groupList.tsx

@@ -52,6 +52,10 @@ export type GroupListColumn =
 
 type Props = WithRouterProps & {
   api: Client;
+  /**
+   * Number of placeholder rows to show during loading
+   */
+  numPlaceholderRows: number;
   organization: Organization;
   queryParams: Record<string, number | string | string[] | undefined | null>;
   customStatsPeriod?: TimePeriodType;
@@ -263,6 +267,7 @@ class GroupList extends Component<Props, State> {
       queryFilterDescription,
       source,
       query,
+      numPlaceholderRows,
     } = this.props;
     const {loading, error, errorData, groups, memberList, pageLinks} = this.state;
 
@@ -306,11 +311,7 @@ class GroupList extends Component<Props, State> {
           <GroupListHeader withChart={!!withChart} withColumns={columns} />
           <PanelBody>
             {loading
-              ? [
-                  ...new Array(
-                    typeof queryParams?.limit === 'number' ? queryParams?.limit : 4
-                  ),
-                ].map((_, i) => (
+              ? [...new Array(numPlaceholderRows)].map((_, i) => (
                   <GroupPlaceholder key={i}>
                     <Placeholder height="50px" />
                   </GroupPlaceholder>

static/app/views/alerts/rules/metric/details/relatedIssues.tsx

@@ -131,6 +131,7 @@ function RelatedIssues({
           customStatsPeriod={timePeriod}
           useTintRow={false}
           source="alerts-related-issues"
+          numPlaceholderRows={queryParams.limit}
         />
       </TableWrapper>
     </Fragment>

static/app/views/alerts/rules/uptime/uptimeIssues.tsx

@@ -38,6 +38,7 @@ export function UptimeIssues({project, ruleId}: Props) {
         limit: 1,
       }}
       renderEmptyMessage={emptyMessage}
+      numPlaceholderRows={1}
     />
   );
 }

static/app/views/detectors/components/details/common/ongoingIssues.tsx

@@ -74,6 +74,7 @@ export function DetectorDetailsOngoingIssues({detectorId, query}: Props) {
           withChart={false}
           renderEmptyMessage={EmptyMessage}
           source="detector-details"
+          numPlaceholderRows={queryParams.limit}
         />
       </ErrorBoundary>
     </Section>

static/app/views/insights/crons/components/monitorIssues.tsx

@@ -104,6 +104,7 @@ export function MonitorIssues({monitor, monitorEnvs}: Props) {
         withChart={false}
         useTintRow={false}
         source="monitors"
+        numPlaceholderRows={20}
       />
     </Fragment>
   );

static/app/views/issueDetails/groupRelatedIssues/index.tsx

@@ -120,6 +120,7 @@ function RelatedIssuesSection({group, relationType}: RelatedIssuesSectionProps)
             canSelectGroups={false}
             withChart={false}
             withColumns={['event']}
+            numPlaceholderRows={4}
           />
         </Fragment>
       ) : null}

static/app/views/performance/transactionSummary/transactionOverview/relatedIssues.tsx

@@ -121,6 +121,7 @@ function RelatedIssues({
           withChart={false}
           withPagination={false}
           source="performance-related-issues"
+          numPlaceholderRows={queryParams.limit}
         />
       </TableWrapper>
     </Fragment>

static/app/views/projectDetail/projectIssues.tsx

@@ -172,7 +172,7 @@ function ProjectIssues({organization, location, projectId, query, api}: Props) {
     : [`${IssuesQuery.ALL}`, query].join(' ').trim();
 
   const queryParams = {
-    limit: '5',
+    limit: 5,
     ...normalizeDateTimeParams(
       pick(location.query, [...Object.values(URL_PARAM), 'cursor'])
     ),
@@ -292,6 +292,7 @@ function ProjectIssues({organization, location, projectId, query, api}: Props) {
         withPagination={false}
         onFetchSuccess={handleFetchSuccess}
         source="project"
+        numPlaceholderRows={queryParams.limit}
       />
     </Fragment>
   );

static/app/views/releases/detail/overview/releaseIssues.tsx

@@ -416,6 +416,7 @@ class ReleaseIssues extends Component<Props, State> {
             withPagination={false}
             onFetchSuccess={this.handleFetchSuccess}
             source="release"
+            numPlaceholderRows={queryParams.limit}
           />
         </div>
       </Fragment>

static/app/views/releases/drawer/newIssues.tsx

@@ -52,6 +52,7 @@ export function NewIssues({release, projectId, withChart = false}: Props) {
       renderEmptyMessage={renderEmptyMessage}
       withPagination
       source="release-drawer"
+      numPlaceholderRows={3}
     />
   );
 }