bug(replay): Do not render the list page until project data has loaded (#44623)

We need to wait for project data so we can know whether to render the
empty-state "setup" onboariding page, or if we should load the table and
wait for table rows to appear

Fixes #44622

Author: ryan953

static/app/components/events/eventReplay/index.tsx

@@ -15,7 +15,7 @@ type Props = {
 };
 
 export default function EventReplay({replayId, orgSlug, projectSlug, event}: Props) {
-  const hasSentOneReplay = useHaveSelectedProjectsSentAnyReplayEvents();
+  const {hasSentOneReplay} = useHaveSelectedProjectsSentAnyReplayEvents();
 
   const onboardingPanel = useCallback(() => import('./replayInlineOnboardingPanel'), []);
   const replayPreview = useCallback(() => import('./replayPreview'), []);

static/app/components/events/interfaces/breadcrumbs/breadcrumbs.spec.tsx

@@ -50,9 +50,11 @@ describe('Breadcrumbs', () => {
     >;
 
   beforeEach(() => {
-    MockUseHaveSelectedProjectsSentAnyReplayEvents.mockReturnValue(false);
-    MockUseReplayOnboardingSidebarPanel.mockReturnValue({
+    MockUseHaveSelectedProjectsSentAnyReplayEvents.mockReturnValue({
       hasSentOneReplay: false,
+      fetching: false,
+    });
+    MockUseReplayOnboardingSidebarPanel.mockReturnValue({
       activateSidebar: jest.fn(),
     });
     props = {
@@ -201,9 +203,11 @@ describe('Breadcrumbs', () => {
 
   describe('replay', () => {
     it('should render the replay inline onboarding component when replays are enabled and the project supports replay', async function () {
-      MockUseHaveSelectedProjectsSentAnyReplayEvents.mockReturnValue(false);
-      MockUseReplayOnboardingSidebarPanel.mockReturnValue({
+      MockUseHaveSelectedProjectsSentAnyReplayEvents.mockReturnValue({
         hasSentOneReplay: false,
+        fetching: false,
+      });
+      MockUseReplayOnboardingSidebarPanel.mockReturnValue({
         activateSidebar: jest.fn(),
       });
       const {container} = render(
@@ -225,9 +229,11 @@ describe('Breadcrumbs', () => {
     });
 
     it('should not render the replay inline onboarding component when the project is not JS', async function () {
-      MockUseHaveSelectedProjectsSentAnyReplayEvents.mockReturnValue(false);
-      MockUseReplayOnboardingSidebarPanel.mockReturnValue({
+      MockUseHaveSelectedProjectsSentAnyReplayEvents.mockReturnValue({
         hasSentOneReplay: false,
+        fetching: false,
+      });
+      MockUseReplayOnboardingSidebarPanel.mockReturnValue({
         activateSidebar: jest.fn(),
       });
       const {container} = render(
@@ -251,9 +257,11 @@ describe('Breadcrumbs', () => {
     });
 
     it('should render a replay when there is a replayId', async function () {
-      MockUseHaveSelectedProjectsSentAnyReplayEvents.mockReturnValue(true);
-      MockUseReplayOnboardingSidebarPanel.mockReturnValue({
+      MockUseHaveSelectedProjectsSentAnyReplayEvents.mockReturnValue({
         hasSentOneReplay: true,
+        fetching: false,
+      });
+      MockUseReplayOnboardingSidebarPanel.mockReturnValue({
         activateSidebar: jest.fn(),
       });
       const {container} = render(

static/app/utils/replays/hooks/useReplayOnboarding.tsx

@@ -25,7 +25,7 @@ function getSelectedProjectList(
 }
 
 export function useHaveSelectedProjectsSentAnyReplayEvents() {
-  const {projects} = useProjects();
+  const {projects, fetching} = useProjects();
   const {selection} = usePageFilters();
 
   const orgSentOneOrMoreReplayEvent = useMemo(() => {
@@ -34,12 +34,14 @@ export function useHaveSelectedProjectsSentAnyReplayEvents() {
     return hasSentOneReplay;
   }, [selection.projects, projects]);
 
-  return orgSentOneOrMoreReplayEvent;
+  return {
+    hasSentOneReplay: orgSentOneOrMoreReplayEvent,
+    fetching,
+  };
 }
 
 export function useReplayOnboardingSidebarPanel() {
   const {location} = useRouteContext();
-  const hasSentOneReplay = useHaveSelectedProjectsSentAnyReplayEvents();
 
   useEffect(() => {
     if (location.hash === '#replay-sidequest') {
@@ -53,5 +55,5 @@ export function useReplayOnboardingSidebarPanel() {
     SidebarPanelStore.activatePanel(SidebarPanelKey.ReplaysOnboarding);
   }, []);
 
-  return {hasSentOneReplay, activateSidebar};
+  return {activateSidebar};
 }

static/app/views/replays/list/replays.tsx

@@ -9,7 +9,7 @@ import EventView from 'sentry/utils/discover/eventView';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {DEFAULT_SORT, REPLAY_LIST_FIELDS} from 'sentry/utils/replays/fetchReplayList';
 import useReplayList from 'sentry/utils/replays/hooks/useReplayList';
-import {useReplayOnboardingSidebarPanel} from 'sentry/utils/replays/hooks/useReplayOnboarding';
+import {useHaveSelectedProjectsSentAnyReplayEvents} from 'sentry/utils/replays/hooks/useReplayOnboarding';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
 import useMedia from 'sentry/utils/useMedia';
@@ -50,13 +50,13 @@ function ReplaysList() {
     organization,
   });
 
-  const {hasSentOneReplay} = useReplayOnboardingSidebarPanel();
+  const {hasSentOneReplay, fetching} = useHaveSelectedProjectsSentAnyReplayEvents();
 
   return (
     <Layout.Body>
       <Layout.Main fullWidth>
         <ReplaysFilters />
-        {hasSentOneReplay ? (
+        {fetching ? null : hasSentOneReplay ? (
           <Fragment>
             <ReplayTable
               fetchError={fetchError}