feat(ui) Add static inbox-zero image (#45427)

We've had customer feedback a few times that our celebration video is
great but its also a bit heavy. Replace the video with a static image to
reduce weight of the page. In the near future we'll make this animated
with framer-motion like other onboarding images.

static/app/views/issueList/noGroupsHandler/noUnresolvedIssues.spec.jsx

@@ -3,10 +3,10 @@ import {render, screen} from 'sentry-test/reactTestingLibrary';
 import NoUnresolvedIssues from 'sentry/views/issueList/noGroupsHandler/noUnresolvedIssues';
 
 describe('NoUnresolvedIssues', function () {
-  it('renders', async function () {
+  it('renders', function () {
     render(<NoUnresolvedIssues title="No issues" />);
 
     expect(screen.getByText('No issues')).toBeInTheDocument();
-    expect(await screen.findByLabelText('Congratulations video')).toBeInTheDocument();
+    expect(screen.getByAltText('No issues found spot illustration')).toBeInTheDocument();
   });
 });

static/app/views/issueList/noGroupsHandler/noUnresolvedIssues.tsx

@@ -1,18 +1,10 @@
-import {Component, Fragment, lazy, Suspense} from 'react';
+import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
-import congratsRobotsPlaceholder from 'sentry-images/spot/congrats-robots-placeholder.jpg';
+import zeroInboxIssuesImg from 'sentry-images/spot/zero-inbox-issues.svg';
 
-import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 
-const Placeholder = () => (
-  <PlaceholderImage
-    alt={t('Congrats, you have no unresolved issues')}
-    src={congratsRobotsPlaceholder}
-  />
-);
-
 const Message = ({
   title,
   subtitle,
@@ -26,50 +18,14 @@ const Message = ({
   </Fragment>
 );
 
-const CongratsRobotsVideo = lazy(() => import('./congratsRobots'));
-
-type State = {hasError: boolean};
-
-/**
- * Error boundary for loading the robots video.
- * This can error because of the file size of the video
- *
- * Silently ignore the error, this isn't really important enough to
- * capture in Sentry
- */
-class ErrorBoundary extends Component<{children: React.ReactNode}, State> {
-  static getDerivedStateFromError(): State {
-    return {
-      hasError: true,
-    };
-  }
-
-  state: State = {
-    hasError: false,
-  };
-
-  render() {
-    if (this.state.hasError) {
-      return <Placeholder />;
-    }
-
-    return this.props.children;
-  }
-}
-
-const NoUnresolvedIssues = ({
-  title,
-  subtitle,
-}: {
+type Props = {
   subtitle: React.ReactNode;
   title: React.ReactNode;
-}) => (
+};
+
+const NoUnresolvedIssues = ({title, subtitle}: Props) => (
   <Wrapper>
-    <ErrorBoundary>
-      <Suspense fallback={<Placeholder />}>
-        <CongratsRobotsVideo />
-      </Suspense>
-    </ErrorBoundary>
+    <img src={zeroInboxIssuesImg} alt="No issues found spot illustration" />
     <Message title={title} subtitle={subtitle} />
   </Wrapper>
 );
@@ -95,8 +51,4 @@ const EmptyMessage = styled('div')`
   }
 `;
 
-const PlaceholderImage = styled('img')`
-  max-height: 320px; /* This should be same height as video in CongratsRobots */
-`;
-
 export default NoUnresolvedIssues;