Skip to content

Commit feb2fd1

Browse files
roagaroaga
authoredMar 17, 2025
feat(autofix): Add animated icon (#87146)
1. Adds animated Seer icon 2. Swaps output stream spinner with the icon 3. Adds the icon to the start screen card 4. Reduces animations on the output stream 5. Adds a little effect when on the "ingesting sentry data" state ![Screenshot 2025-03-14 at 5 40 46 PM](https://github.com/user-attachments/assets/d099d2e8-6b93-4be9-9826-e3ffa7437fd7) <img width="639" alt="Screenshot 2025-03-14 at 4 23 40 PM" src="https://github.com/user-attachments/assets/85e65eb0-581d-4d0a-844c-a68f6c553072" />
1 parent 411715c commit feb2fd1

File tree

5 files changed

+420
-37
lines changed

5 files changed

+420
-37
lines changed
 

‎static/app/components/ai/SeerIcon.tsx

+202-18
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,219 @@
11
import {forwardRef} from 'react';
2+
import {keyframes} from '@emotion/react';
23
import styled from '@emotion/styled';
34

45
import type {SVGIconProps} from 'sentry/icons/svgIcon';
56
import {SvgIcon} from 'sentry/icons/svgIcon';
67

8+
const rockLeft = keyframes`
9+
0% {
10+
transform: rotate(0deg) scaleY(0.8);
11+
}
12+
25% {
13+
transform: rotate(-15deg) scaleY(1);
14+
}
15+
50% {
16+
transform: rotate(0deg) scaleY(0.8);
17+
}
18+
75% {
19+
transform: rotate(15deg) scaleY(1);
20+
}
21+
100% {
22+
transform: rotate(0deg) scaleY(0.8);
23+
}
24+
`;
25+
26+
const rockRight = keyframes`
27+
0% {
28+
transform: rotate(0deg) scaleY(0.8);
29+
}
30+
25% {
31+
transform: rotate(15deg) scaleY(1);
32+
}
33+
50% {
34+
transform: rotate(0deg) scaleY(0.8);
35+
}
36+
75% {
37+
transform: rotate(-15deg) scaleY(1);
38+
}
39+
100% {
40+
transform: rotate(0deg) scaleY(0.8);
41+
}
42+
`;
43+
44+
const InteractionWrapper = styled('div')`
45+
display: inline-block;
46+
transform-origin: bottom center;
47+
transition: transform 1s ease;
48+
49+
&:hover {
50+
animation: ${rockLeft} 2s ease-in-out infinite;
51+
}
52+
53+
&:hover:active {
54+
animation: ${rockRight} 2s ease-in-out infinite;
55+
}
56+
`;
57+
758
const SeerIcon = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
859
return (
960
<SvgIcon {...props} ref={ref} viewBox="0 0 30 30">
10-
<StyledPath d="M14.0407,3.1458L3.5742,17.0376c-.2989.3967-.2327.9584.1501,1.2748l10.4917,8.6705c.3436.284.8405.2838,1.1839-.0005l10.4717-8.6691c.3827-.3169.4483-.8788.1488-1.2753L15.5235,3.1448c-.3719-.4922-1.1115-.4917-1.4828.001Z" />
11-
<StyledPath d="M14.1483,12.3135l-5.1122,4.0552c-.3332.2643-.314.6812.0426.9278l5.1121,3.5339c.3337.2307.8482.2312,1.1828.0012l5.1412-3.534c.359-.2468.3782-.6657.0427-.9303l-5.1411-4.0551c-.3449-.272-.9243-.2714-1.2682.0013Z" />
12-
<StyledLine x1="14.7558" y1="15.9343" x2="14.7558" y2="17.2053" />
61+
<path
62+
d="M14.0407,3.1458L3.5742,17.0376c-.2989.3967-.2327.9584.1501,1.2748l10.4917,8.6705c.3436.284.8405.2838,1.1839-.0005l10.4717-8.6691c.3827-.3169.4483-.8788.1488-1.2753L15.5235,3.1448c-.3719-.4922-1.1115-.4917-1.4828.001Z"
63+
fill="none"
64+
stroke="currentColor"
65+
strokeLinecap="round"
66+
strokeLinejoin="round"
67+
strokeWidth="2.25px"
68+
/>
69+
<path
70+
d="M14.1483,12.3135l-5.1122,4.0552c-.3332.2643-.314.6812.0426.9278l5.1121,3.5339c.3337.2307.8482.2312,1.1828.0012l5.1412-3.534c.359-.2468.3782-.6657.0427-.9303l-5.1411-4.0551c-.3449-.272-.9243-.2714-1.2682.0013Z"
71+
fill="none"
72+
stroke="currentColor"
73+
strokeLinecap="round"
74+
strokeLinejoin="round"
75+
strokeWidth="2.25px"
76+
/>
77+
<line
78+
x1="14.7558"
79+
y1="15.9343"
80+
x2="14.7558"
81+
y2="17.2053"
82+
fill="none"
83+
stroke="currentColor"
84+
strokeLinecap="round"
85+
strokeLinejoin="round"
86+
strokeWidth="2.25px"
87+
/>
1388
</SvgIcon>
1489
);
1590
});
1691

1792
SeerIcon.displayName = 'SeerIcon';
1893

19-
export {SeerIcon};
94+
const SeerLoadingIcon = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
95+
return (
96+
<InteractionWrapper>
97+
<SvgIcon {...props} ref={ref} viewBox="0 0 30 30">
98+
<defs>
99+
<clipPath id="eaf-dde7-1">
100+
<rect x="0" y="0" width="30" height="30" />
101+
</clipPath>
102+
</defs>
103+
<g clipPath="url(#eaf-dde7-1)" style={{isolation: 'isolate'}}>
104+
<g>
105+
<path
106+
fill="none"
107+
stroke="currentColor"
108+
strokeWidth="2.25"
109+
strokeLinecap="round"
110+
strokeLinejoin="round"
111+
d="m14.0407 3.1458l-10.4665 13.8918c-0.2989 0.3967 -0.2327 0.9584 0.1501 1.2748l10.4917 8.6705c0.3436 0.284 0.8405 0.2838 1.1839 -0.0005l10.4717 -8.6691c0.3827 -0.3169 0.4483 -0.8788 0.1488 -1.2753l-10.4969 -13.8932c-0.3719 -0.4922 -1.1115 -0.4917 -1.4828 0.001z"
112+
/>
113+
<path
114+
fill="none"
115+
stroke="currentColor"
116+
strokeWidth="2.25"
117+
strokeLinecap="round"
118+
strokeLinejoin="round"
119+
d="m14.1483 12.3135l-5.1122 4.0552c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1411 -4.0551c-0.3449 -0.272 -0.9243 -0.2714 -1.2682 0.0013l0.0001 0z"
120+
>
121+
<animate
122+
keyTimes="0;0.0517;0.0767;0.0783;0.1034;0.8;0.825;0.8266;0.8517;1"
123+
calcMode="spline"
124+
keySplines="0 0 1 1;0.25 0.1 0.25 1;0 0 1 1;0.25 0.1 0.25 1;0 0 1 1;0.25 0.1 0.25 1;0 0 1 1;0.25 0.1 0.25 1;0 0 1 1"
125+
dur="10000ms"
126+
repeatCount="indefinite"
127+
attributeName="d"
128+
values="m14.1483 12.3135l-5.1122 4.0552c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1411 -4.0551c-0.3449 -0.272 -0.9243 -0.2714 -1.2682 0.0013l0.0001 0z;m14.1483 12.3135l-5.1122 4.0552c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1411 -4.0551c-0.3449 -0.272 -0.9243 -0.2714 -1.2682 0.0013l0.0001 0z;m14.095 19.6386l-5.0589 -3.2699c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1944 3.27c-0.4128 0.3336 -0.8147 0.2817 -1.2682 0.0013l0.0001 0z;m14.095 19.6386l-5.0589 -3.2699c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1944 3.27c-0.4128 0.3336 -0.8147 0.2817 -1.2682 0.0013l0.0001 0z;m14.1483 12.3135l-5.1122 4.0552c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1411 -4.0551c-0.3449 -0.272 -0.9243 -0.2714 -1.2682 0.0013l0.0001 0z;m14.1483 12.3135l-5.1122 4.0552c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1411 -4.0551c-0.3449 -0.272 -0.9243 -0.2714 -1.2682 0.0013l0.0001 0z;m14.095 19.6386l-5.0589 -3.2699c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1944 3.27c-0.4128 0.3336 -0.8147 0.2817 -1.2682 0.0013l0.0001 0z;m14.095 19.6386l-5.0589 -3.2699c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1944 3.27c-0.4128 0.3336 -0.8147 0.2817 -1.2682 0.0013l0.0001 0z;m14.1483 12.3135l-5.1122 4.0552c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1411 -4.0551c-0.3449 -0.272 -0.9243 -0.2714 -1.2682 0.0013l0.0001 0z;m14.1483 12.3135l-5.1122 4.0552c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1411 -4.0551c-0.3449 -0.272 -0.9243 -0.2714 -1.2682 0.0013l0.0001 0z"
129+
/>
130+
</path>
131+
<polyline
132+
points="14.7558,15.9343 14.7558,17.2053"
133+
fill="none"
134+
stroke="currentColor"
135+
strokeWidth="2.25"
136+
strokeLinecap="round"
137+
strokeLinejoin="round"
138+
>
139+
<animate
140+
keyTimes="0;0.0517;0.0767;0.1017;0.15;0.2083;0.2817;0.3483;0.435;0.5567;0.6883;0.775;0.8;0.825;0.85;1"
141+
calcMode="spline"
142+
keySplines="0 0 1 1;0.25 0.1 0.25 1;0.75 0 0.75 0.9;0 0 1 1;0.25 0.1 0.25 1;0.75 0 0.75 0.9;0.75 0 0.75 0.9;0 0 1 1;0.75 0 0.75 0.9;0 0 1 1;0.25 0.1 0.25 1;0 0 1 1;0.25 0.1 0.25 1;0.75 0 0.75 0.9;0 0 1 1"
143+
dur="10000ms"
144+
repeatCount="indefinite"
145+
attributeName="points"
146+
values="14.7558,15.9343 14.7558,17.2053;14.7558,15.9343 14.7558,17.2053;14.7068,19.7303 14.7068,21.0013;14.7558,15.9343 14.7558,17.2053;14.7558,15.9343 14.7558,17.2053;12,15.9343 12,17.2053;17.52,15.9343 17.52,17.2053;14.76,15.9343 14.76,17.2053;14.76,15.9343 14.76,17.2053;16.6521,14.383 16.6521,15.654;16.6521,14.383 16.6521,15.654;14.76,15.9343 14.76,17.2053;14.7558,15.9343 14.7558,17.2053;14.7068,19.7303 14.7068,21.0013;14.7558,15.9343 14.7558,17.2053;14.7558,15.9343 14.7558,17.2053"
147+
/>
148+
</polyline>
149+
</g>
150+
</g>
151+
</SvgIcon>
152+
</InteractionWrapper>
153+
);
154+
});
20155

21-
const StyledPath = styled('path')`
22-
fill: none;
23-
stroke: currentColor;
24-
stroke-linecap: round;
25-
stroke-linejoin: round;
26-
stroke-width: 2.25px;
27-
`;
156+
const SeerWaitingIcon = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
157+
return (
158+
<InteractionWrapper>
159+
<SvgIcon {...props} ref={ref} viewBox="0 0 30 30">
160+
<defs>
161+
<clipPath id="eaf-7216-1">
162+
<rect x="0" y="0" width="30" height="30" />
163+
</clipPath>
164+
</defs>
165+
<g clipPath="url(#eaf-7216-1)" style={{isolation: 'isolate'}}>
166+
<g>
167+
<path
168+
fill="none"
169+
stroke="currentColor"
170+
strokeWidth="2.25"
171+
strokeLinecap="round"
172+
strokeLinejoin="round"
173+
d="m14.0407 3.1458l-10.4665 13.8918c-0.2989 0.3967 -0.2327 0.9584 0.1501 1.2748l10.4917 8.6705c0.3436 0.284 0.8405 0.2838 1.1839 -0.0005l10.4717 -8.6691c0.3827 -0.3169 0.4483 -0.8788 0.1488 -1.2753l-10.4969 -13.8932c-0.3719 -0.4922 -1.1115 -0.4917 -1.4828 0.001z"
174+
/>
175+
<path
176+
fill="none"
177+
stroke="currentColor"
178+
strokeWidth="2.25"
179+
strokeLinecap="round"
180+
strokeLinejoin="round"
181+
d="m14.1483 12.3135l-5.1122 4.0552c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1411 -4.0551c-0.3449 -0.272 -0.9243 -0.2714 -1.2682 0.0013l0.0001 0z"
182+
transform="matrix(1 0 0 1.1072 0 -1.7755)"
183+
>
184+
<animate
185+
keyTimes="0;0.2866;0.3566;0.3934;0.4634;0.5266;0.6466;0.6866;0.7266;1"
186+
calcMode="spline"
187+
keySplines="0 0 1 1;0.75 0 0.75 0.9;0.25 0.1 0.25 1;0.75 0 0.75 0.9;0.25 0.1 0.25 1;0 0 1 1;0.75 0 0.75 0.9;0.25 0.1 0.25 1;0 0 1 1"
188+
dur="5000ms"
189+
repeatCount="indefinite"
190+
attributeName="d"
191+
values="m14.1483 12.3135l-5.1122 4.0552c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1411 -4.0551c-0.3449 -0.272 -0.9243 -0.2714 -1.2682 0.0013l0.0001 0z;m14.1483 12.3135l-5.1122 4.0552c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1411 -4.0551c-0.3449 -0.272 -0.9243 -0.2714 -1.2682 0.0013l0.0001 0z;m14.1698 11.1863l-5.1336 5.1824c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1196 -5.1823c-0.3449 -0.272 -0.9243 -0.2714 -1.2682 0.0013l0.0001 0z;m14.1483 12.3135l-5.1122 4.0552c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1411 -4.0551c-0.3449 -0.272 -0.9243 -0.2714 -1.2682 0.0013l0.0001 0z;m14.1698 11.1863l-5.1336 5.1824c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1196 -5.1823c-0.3449 -0.272 -0.9243 -0.2714 -1.2682 0.0013l0.0001 0z;m14.1483 12.3135l-5.1122 4.0552c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1411 -4.0551c-0.3449 -0.272 -0.9243 -0.2714 -1.2682 0.0013l0.0001 0z;m14.1483 12.3135l-5.1122 4.0552c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1411 -4.0551c-0.3449 -0.272 -0.9243 -0.2714 -1.2682 0.0013l0.0001 0z;m14.1828 19.6768l-5.1467 -3.3081c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1066 3.3082c-0.3449 -0.272 -0.9243 -0.2714 -1.2682 0.0013l0.0001 0z;m14.1483 12.3135l-5.1122 4.0552c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1411 -4.0551c-0.3449 -0.272 -0.9243 -0.2714 -1.2682 0.0013l0.0001 0z;m14.1483 12.3135l-5.1122 4.0552c-0.3332 0.2643 -0.314 0.6812 0.0426 0.9278l5.1121 3.5339c0.3337 0.2307 0.8482 0.2312 1.1828 0.0012l5.1412 -3.534c0.359 -0.2468 0.3782 -0.6657 0.0427 -0.9303l-5.1411 -4.0551c-0.3449 -0.272 -0.9243 -0.2714 -1.2682 0.0013l0.0001 0z"
192+
/>
193+
</path>
194+
<polyline
195+
points="14.7558,15.9343 14.7558,17.2053"
196+
fill="none"
197+
stroke="currentColor"
198+
strokeWidth="2.25"
199+
strokeLinecap="round"
200+
strokeLinejoin="round"
201+
>
202+
<animate
203+
keyTimes="0;0.6466;0.6866;0.7266;1"
204+
calcMode="spline"
205+
keySplines="0 0 1 1;0.75 0 0.75 0.9;0.25 0.1 0.25 1;0 0 1 1"
206+
dur="5000ms"
207+
repeatCount="indefinite"
208+
attributeName="points"
209+
values="14.7558,15.9343 14.7558,17.2053;14.7558,15.9343 14.7558,17.2053;14.7371,20.2116 14.7371,21.4826;14.7558,15.9343 14.7558,17.2053;14.7558,15.9343 14.7558,17.2053"
210+
/>
211+
</polyline>
212+
</g>
213+
</g>
214+
</SvgIcon>
215+
</InteractionWrapper>
216+
);
217+
});
28218

29-
const StyledLine = styled('line')`
30-
fill: none;
31-
stroke: currentColor;
32-
stroke-linecap: round;
33-
stroke-linejoin: round;
34-
stroke-width: 2.25px;
35-
`;
219+
export {SeerIcon, SeerLoadingIcon, SeerWaitingIcon};

0 commit comments

Comments
 (0)