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

This reverts commit a11680b216e9149d94d6984f1d876f2dd936a6e5.

Co-authored-by: asottile-sentry <103459774+asottile-sentry@users.noreply.github.com>

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', function () {
+  it('renders', async function () {
     render(<NoUnresolvedIssues title="No issues" />);
 
     expect(screen.getByText('No issues')).toBeInTheDocument();
-    expect(screen.getByAltText('No issues found spot illustration')).toBeInTheDocument();
+    expect(await screen.findByLabelText('Congratulations video')).toBeInTheDocument();
   });
 });

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

@@ -1,10 +1,18 @@
-import {Fragment} from 'react';
+import {Component, Fragment, lazy, Suspense} from 'react';
 import styled from '@emotion/styled';
 
-import zeroInboxIssuesImg from 'sentry-images/spot/zero-inbox-issues.svg';
+import congratsRobotsPlaceholder from 'sentry-images/spot/congrats-robots-placeholder.jpg';
 
+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,
@@ -18,14 +26,50 @@ const Message = ({
   </Fragment>
 );
 
-type Props = {
+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,
+}: {
   subtitle: React.ReactNode;
   title: React.ReactNode;
-};
-
-const NoUnresolvedIssues = ({title, subtitle}: Props) => (
+}) => (
   <Wrapper>
-    <img src={zeroInboxIssuesImg} alt="No issues found spot illustration" />
+    <ErrorBoundary>
+      <Suspense fallback={<Placeholder />}>
+        <CongratsRobotsVideo />
+      </Suspense>
+    </ErrorBoundary>
     <Message title={title} subtitle={subtitle} />
   </Wrapper>
 );
@@ -51,4 +95,8 @@ const EmptyMessage = styled('div')`
   }
 `;
 
+const PlaceholderImage = styled('img')`
+  max-height: 320px; /* This should be same height as video in CongratsRobots */
+`;
+
 export default NoUnresolvedIssues;