fix(replay): Fix error state quickly flashing when loading replay (#72823)

This fixes the error state that quickly flashes when loading a replay.

The `useReplayData` hook makes ~5 requests, but they do not all happen
in parallel. The fetching state ends up looking like the following:

* fetch replay, fetch extra errors, fetch platform ("fetching" == true)
* above requests finish ("fetching" == false)
* fetch attachments, fetch extra errors, fetch platform errors
("fetching" == true)

This intermittent fetching state means that we have [components that
erroneously
render](https://github.com/getsentry/sentry/blob/78334b95bc5ff69816fcaeafff8f67fadf0727c7/static/app/components/replays/replayView.tsx#L43)
an error state because it believes API requests have completed and that
the data is missing.

To test:
Loading a replay should no longer flicker and should no longer flicker
with a red error screen. We use `useReplayReader` in quite a few places
besides replay details, but I think all of them should benefit from this
change.

Closes #70077

---------

Co-authored-by: Michelle Zhang <[email protected]>

Author: billyvg

Diff for: static/app/utils/replays/hooks/useReplayData.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useMemo} from 'react';
+import {useCallback, useMemo, useRef} from 'react';
 
 import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
 import useFetchParallelPages from 'sentry/utils/api/useFetchParallelPages';
@@ -76,8 +76,8 @@ function useReplayData({
   errorsPerPage = 50,
   segmentsPerPage = 100,
 }: Options): Result {
+  const hasFetchedAttachments = useRef(false);
   const projects = useProjects();
-
   const queryClient = useQueryClient();
 
   // Fetch every field of the replay. The TS type definition lists every field
@@ -120,13 +120,16 @@ function useReplayData({
     [orgSlug, projectSlug, replayId]
   );
 
-  const {pages: attachmentPages, isFetching: isFetchingAttachments} =
-    useFetchParallelPages({
-      enabled: !fetchReplayError && Boolean(projectSlug) && Boolean(replayRecord),
-      hits: replayRecord?.count_segments ?? 0,
-      getQueryKey: getAttachmentsQueryKey,
-      perPage: segmentsPerPage,
-    });
+  const {
+    pages: attachmentPages,
+    isFetching: isFetchingAttachments,
+    error: fetchAttachmentsError,
+  } = useFetchParallelPages({
+    enabled: !fetchReplayError && Boolean(projectSlug) && Boolean(replayRecord),
+    hits: replayRecord?.count_segments ?? 0,
+    getQueryKey: getAttachmentsQueryKey,
+    perPage: segmentsPerPage,
+  });
 
   const getErrorsQueryKey = useCallback(
     ({cursor, per_page}): ApiQueryKey => {
@@ -230,12 +233,25 @@ function useReplayData({
   }, [orgSlug, replayId, projectSlug, queryClient]);
 
   return useMemo(() => {
+    // This hook can enter a state where `fetching` below is false
+    // before it is entirely ready (i.e. it has not fetched
+    // attachemnts yet). This can cause downstream components to
+    // think it is no longer fetching and will display an error
+    // because there are no attachments. The below will require
+    // that we have attempted to fetch an attachment once (or it
+    // errors) before we toggle fetching state to false.
+    hasFetchedAttachments.current =
+      hasFetchedAttachments.current || isFetchingAttachments;
+
     const fetching =
       isFetchingReplay ||
       isFetchingAttachments ||
       isFetchingErrors ||
       isFetchingExtraErrors ||
-      isFetchingPlatformErrors;
+      isFetchingPlatformErrors ||
+      (!hasFetchedAttachments.current &&
+        !fetchAttachmentsError &&
+        Boolean(replayRecord?.count_segments));
 
     const allErrors = errorPages
       .concat(extraErrorPages)
@@ -256,6 +272,7 @@ function useReplayData({
     errorPages,
     extraErrorPages,
     fetchReplayError,
+    fetchAttachmentsError,
     isFetchingAttachments,
     isFetchingErrors,
     isFetchingExtraErrors,