ref(ui): Replace EventWaiter class component with useEventWaiter hook

static/app/components/performanceOnboarding/sidebar.tsx

@@ -33,11 +33,10 @@ import OnboardingDrawerStore, {
 import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import pulsingIndicatorStyles from 'sentry/styles/pulsingIndicator';
 import type {Project} from 'sentry/types/project';
-import EventWaiter from 'sentry/utils/eventWaiter';
 import useApi from 'sentry/utils/useApi';
+import {useEventWaiter} from 'sentry/utils/useEventWaiter';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
-import usePrevious from 'sentry/utils/usePrevious';
 import useProjects from 'sentry/utils/useProjects';
 
 import {filterProjects} from './utils';
@@ -233,15 +232,12 @@ function OnboardingContent({currentProject}: {currentProject: Project}) {
   const organization = useOrganization();
   const {isSelfHosted, urlPrefix} = useLegacyStore(ConfigStore);
   const copyEnabled = useCopySetupInstructionsEnabled();
-  const [received, setReceived] = useState<boolean>(false);
-
-  const previousProject = usePrevious(currentProject);
-
-  useEffect(() => {
-    if (previousProject.id !== currentProject.id) {
-      setReceived(false);
-    }
-  }, [previousProject.id, currentProject.id]);
+  const firstIssue = useEventWaiter({
+    eventType: 'transaction',
+    organization,
+    project: currentProject,
+  });
+  const received = !!firstIssue;
 
   const currentPlatform = currentProject.platform
     ? platforms.find(p => p.id === currentProject.platform)
@@ -362,17 +358,7 @@ function OnboardingContent({currentProject}: {currentProject: Project}) {
           );
         })}
       </Steps>
-      <EventWaiter
-        api={api}
-        organization={organization}
-        project={currentProject}
-        eventType="transaction"
-        onIssueReceived={() => {
-          setReceived(true);
-        }}
-      >
-        {() => (received ? <EventReceivedIndicator /> : <EventWaitingIndicator />)}
-      </EventWaiter>
+      {received ? <EventReceivedIndicator /> : <EventWaitingIndicator />}
     </TabSelectionScope>
   );
 }

static/app/components/updatedEmptyState.tsx

@@ -33,9 +33,9 @@ import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import pulsingIndicatorStyles from 'sentry/styles/pulsingIndicator';
 import type {PlatformIntegration, Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
-import EventWaiter from 'sentry/utils/eventWaiter';
 import {decodeInteger} from 'sentry/utils/queryString';
 import useApi from 'sentry/utils/useApi';
+import {useEventWaiter} from 'sentry/utils/useEventWaiter';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -56,32 +56,31 @@ export function SetupTitle({project}: {project: Project}) {
 
 function WaitingIndicator({project}: {project: Project}) {
   const organization = useOrganization();
+  const firstIssue = useEventWaiter({
+    eventType: 'error',
+    organization,
+    project,
+  });
+
+  if (!firstIssue) {
+    return <EventWaitingIndicator />;
+  }
 
   return (
-    <EventWaiter organization={organization} project={project} eventType="error">
-      {({firstIssue}) =>
-        firstIssue ? (
-          <LinkButton
-            onClick={() =>
-              trackAnalytics('growth.onboarding_take_to_error', {
-                organization,
-                platform: project.platform,
-              })
-            }
-            to={`/organizations/${organization.slug}/issues/${
-              firstIssue && firstIssue !== true && 'id' in firstIssue
-                ? `${firstIssue.id}/`
-                : ''
-            }?referrer=onboarding-first-event-indicator`}
-            priority="primary"
-          >
-            {t('Take me to my error')}
-          </LinkButton>
-        ) : (
-          <EventWaitingIndicator />
-        )
+    <LinkButton
+      onClick={() =>
+        trackAnalytics('growth.onboarding_take_to_error', {
+          organization,
+          platform: project.platform,
+        })
       }
-    </EventWaiter>
+      to={`/organizations/${organization.slug}/issues/${
+        firstIssue !== true && 'id' in firstIssue ? `${firstIssue.id}/` : ''
+      }?referrer=onboarding-first-event-indicator`}
+      priority="primary"
+    >
+      {t('Take me to my error')}
+    </LinkButton>
   );
 }