fix(replay): Fix a case where an error message would flash while the replay is loading (#61504)

Followup from https://github.com/getsentry/sentry/pull/61388

Relates to https://github.com/getsentry/sentry/issues/60800

static/app/components/replays/replayView.tsx

@@ -22,7 +22,7 @@ type Props = {
 function ReplayView({toggleFullscreen}: Props) {
   const isFullscreen = useIsFullscreen();
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
-  const {replay} = useReplayContext();
+  const {isFetching, replay} = useReplayContext();
 
   return (
     <Fragment>
@@ -41,7 +41,7 @@ function ReplayView({toggleFullscreen}: Props) {
               </Button>
             ) : null}
           </ContextContainer>
-          {replay?.hasProcessingErrors() ? (
+          {!isFetching && replay?.hasProcessingErrors() ? (
             <ReplayProcessingError processingErrors={replay.processingErrors()} />
           ) : (
             <Panel>

static/app/views/replays/detail/layout/index.tsx

@@ -5,7 +5,7 @@ import ErrorBoundary from 'sentry/components/errorBoundary';
 import ReplayController from 'sentry/components/replays/replayController';
 import ReplayView from 'sentry/components/replays/replayView';
 import {space} from 'sentry/styles/space';
-import {LayoutKey} from 'sentry/utils/replays/hooks/useReplayLayout';
+import useReplayLayout, {LayoutKey} from 'sentry/utils/replays/hooks/useReplayLayout';
 import {useDimensions} from 'sentry/utils/useDimensions';
 import useFullscreen from 'sentry/utils/window/useFullscreen';
 import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
@@ -21,11 +21,10 @@ const MIN_CONTENT_HEIGHT = 180;
 
 const DIVIDER_SIZE = 16;
 
-type Props = {
-  layout?: LayoutKey;
-};
+function ReplayLayout() {
+  const {getLayout} = useReplayLayout();
+  const layout = getLayout() ?? LayoutKey.TOPBAR;
 
-function ReplayLayout({layout = LayoutKey.TOPBAR}: Props) {
   const fullscreenRef = useRef(null);
   const {toggle: toggleFullscreen} = useFullscreen({
     elementRef: fullscreenRef,

static/app/views/replays/details.tsx

@@ -19,7 +19,6 @@ import useInitialTimeOffsetMs, {
   TimeOffsetLocationQueryParams,
 } from 'sentry/utils/replays/hooks/useInitialTimeOffsetMs';
 import useLogReplayDataLoaded from 'sentry/utils/replays/hooks/useLogReplayDataLoaded';
-import useReplayLayout from 'sentry/utils/replays/hooks/useReplayLayout';
 import useReplayPageview from 'sentry/utils/replays/hooks/useReplayPageview';
 import useReplayReader from 'sentry/utils/replays/hooks/useReplayReader';
 import useRouteAnalyticsEventNames from 'sentry/utils/routeAnalytics/useRouteAnalyticsEventNames';
@@ -29,7 +28,6 @@ import useOrganization from 'sentry/utils/useOrganization';
 import ReplaysLayout from 'sentry/views/replays/detail/layout';
 import Page from 'sentry/views/replays/detail/page';
 import ReplayTransactionContext from 'sentry/views/replays/detail/trace/replayTransactionContext';
-import type {ReplayError, ReplayRecord} from 'sentry/views/replays/types';
 
 type Props = RouteComponentProps<
   {replaySlug: string},
@@ -154,40 +152,17 @@ function ReplayDetails({params: {replaySlug}}: Props) {
       initialTimeOffsetMs={initialTimeOffsetMs}
     >
       <ReplayTransactionContext replayRecord={replayRecord}>
-        <DetailsInsideContext
+        <Page
           orgSlug={orgSlug}
           replayRecord={replayRecord}
           projectSlug={projectSlug}
           replayErrors={replayErrors}
-        />
+        >
+          <ReplaysLayout />
+        </Page>
       </ReplayTransactionContext>
     </ReplayContextProvider>
   );
 }
 
-function DetailsInsideContext({
-  orgSlug,
-  replayRecord,
-  projectSlug,
-  replayErrors,
-}: {
-  orgSlug: string;
-  projectSlug: string | null;
-  replayErrors: ReplayError[];
-  replayRecord: ReplayRecord | undefined;
-}) {
-  const {getLayout} = useReplayLayout();
-
-  return (
-    <Page
-      orgSlug={orgSlug}
-      replayRecord={replayRecord}
-      projectSlug={projectSlug}
-      replayErrors={replayErrors}
-    >
-      <ReplaysLayout layout={getLayout()} />
-    </Page>
-  );
-}
-
 export default ReplayDetails;