Skip to content

fix(seer): Smooth summary anmiation, no initial animation #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

fix(seer): Smooth summary anmiation, no initial animation #26

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5c608ca
fix(seer): Smooth summary anmiation, no initial animation
scttcper Oct 3, 2025
47a89d6
revert padding change
scttcper Oct 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 29 additions & 23 deletions static/app/components/group/groupSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import {isValidElement, useEffect, useState} from 'react';
import {isValidElement, useEffect, useLayoutEffect, useState} from 'react';
import styled from '@emotion/styled';
import {motion} from 'framer-motion';

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';
Expand All @@ -21,6 +23,7 @@ import type {Project} from 'sentry/types/project';
import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
import {MarkedText} from 'sentry/utils/marked/markedText';
import {useApiQuery, useQueryClient, type ApiQueryKey} from 'sentry/utils/queryClient';
import testableTransition from 'sentry/utils/testableTransition';
import useOrganization from 'sentry/utils/useOrganization';
import {useAiConfig} from 'sentry/views/issueDetails/streamline/hooks/useAiConfig';

Expand Down Expand Up @@ -258,8 +261,7 @@ function GroupSummaryCollapsed({
setIsExpanded(!isExpanded);
};

useEffect(() => {
// eslint-disable-next-line react-you-might-not-need-an-effect/no-derived-state
useLayoutEffect(() => {
setIsExpanded(!defaultCollapsed);
}, [defaultCollapsed]);

Expand Down Expand Up @@ -287,17 +289,29 @@ function GroupSummaryCollapsed({
</CollapsedHeaderContent>
</CollapsedHeader>

<ExpandableContent isExpanded={isExpanded}>
<GroupSummaryFull
group={group}
project={project}
data={data}
isPending={isPending}
isError={isError}
preview={false}
setForceEvent={setForceEvent}
event={event}
/>
<ExpandableContent
initial={false}
animate={{height: isExpanded ? 'auto' : 0}}
transition={testableTransition({
type: 'spring',
damping: 50,
stiffness: 600,
bounce: 0,
visualDuration: 0.4,
})}
Comment on lines +295 to +301
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[PerformanceOptimization]

The spring animation configuration has very high stiffness (600) and damping (50) which could cause performance issues on slower devices, especially when multiple drawers are animated simultaneously. The high stiffness combined with bounce: 0 might also create jarring motion.

Consider more moderate values for better performance and smoother feel:

Suggested Change
Suggested change
transition={testableTransition({
type: 'spring',
damping: 50,
stiffness: 600,
bounce: 0,
visualDuration: 0.4,
})}
transition={testableTransition({
type: 'spring',
damping: 25,
stiffness: 300,
bounce: 0,
visualDuration: 0.3,
})}

⚡ Committable suggestion

Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Context for Agents 
[**PerformanceOptimization**]

The spring animation configuration has very high stiffness (600) and damping (50) which could cause performance issues on slower devices, especially when multiple drawers are animated simultaneously. The high stiffness combined with `bounce: 0` might also create jarring motion.

Consider more moderate values for better performance and smoother feel:

<details>
<summary>Suggested Change</summary>

```suggestion
            transition={testableTransition({
              type: 'spring',
              damping: 25,
              stiffness: 300,
              bounce: 0,
              visualDuration: 0.3,
            })}
```

⚡ **Committable suggestion**

Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

</details>

File: static/app/components/group/groupSummary.tsx
Line: 301

>
<Flex paddingTop="lg">
<GroupSummaryFull
group={group}
project={project}
data={data}
isPending={isPending}
isError={isError}
preview={false}
setForceEvent={setForceEvent}
event={event}
/>
</Flex>
</ExpandableContent>
</CollapsedContent>
)}
Expand Down Expand Up @@ -528,14 +542,6 @@ const ChevronIcon = styled('div')`
flex-shrink: 0;
`;

const ExpandableContent = styled('div')<{isExpanded: boolean}>`
max-height: ${p => (p.isExpanded ? '1000px' : '0')};
const ExpandableContent = styled(motion.div)`
overflow: hidden;
transition: max-height 0.3s ease-in-out;

${p =>
p.isExpanded &&
`
padding-top: ${p.theme.space.lg};
`}
`;