fix(issue-stream): Event chart animation (#71206)

This PR is a follow up enhancement to the newly added
`<EventStatusChart/>` component. A recent change renders the sub status
while the chart is loading, but that caused the fade in animation to
only apply to the sub-status text. This PR changes the behavior so the
chart status is rendered in without an animation, but then the event
status chart fades in upon initial load.

static/app/components/charts/groupStatusChart.tsx

@@ -110,21 +110,23 @@ function GroupStatusChart({
         {loading ? (
           <Placeholder height={'36px'} />
         ) : (
-          <MiniBarChart
-            animateBars
-            showXAxisLine
-            hideZeros={hideZeros}
-            markLineLabelSide="right"
-            barOpacity={0.4}
-            height={showMarkLine ? 36 : height}
-            isGroupedByDate
-            showTimeInTooltip
-            series={graphOptions.series}
-            colors={graphOptions.colors}
-            emphasisColors={graphOptions.emphasisColors}
-            hideDelay={50}
-            showMarkLineLabel={showMarkLine}
-          />
+          <ChartAnimationWrapper>
+            <MiniBarChart
+              animateBars
+              showXAxisLine
+              hideZeros={hideZeros}
+              markLineLabelSide="right"
+              barOpacity={0.4}
+              height={showMarkLine ? 36 : height}
+              isGroupedByDate
+              showTimeInTooltip
+              series={graphOptions.series}
+              colors={graphOptions.colors}
+              emphasisColors={graphOptions.emphasisColors}
+              hideDelay={50}
+              showMarkLineLabel={showMarkLine}
+            />
+          </ChartAnimationWrapper>
         )}
         <GraphText>{groupStatus}</GraphText>
       </ChartWrapper>
@@ -134,10 +136,8 @@ function GroupStatusChart({
 
 export default GroupStatusChart;
 
-const ChartWrapper = styled('div')`
+const ChartAnimationWrapper = styled('div')`
   animation: fade-in 0.5s;
-  display: flex;
-  flex-direction: column;
 
   @keyframes fade-in {
     from {
@@ -149,6 +149,11 @@ const ChartWrapper = styled('div')`
   }
 `;
 
+const ChartWrapper = styled('div')`
+  display: flex;
+  flex-direction: column;
+`;
+
 const GraphText = styled('div')`
   color: ${p => p.theme.gray300};
 `;