Revert "feat(replays): Improve loading and error display for the Trace tab on Replay Details (#47704)"

This reverts commit fc8500f7f4f256b304289f402f75d05a3a5a326c.

Co-authored-by: eliashussary <7349258+eliashussary@users.noreply.github.com>

static/app/views/replays/detail/emptyState.tsx

@@ -1,14 +0,0 @@
-import styled from '@emotion/styled';
-
-import EmptyStateWarning from 'sentry/components/emptyStateWarning';
-
-const StyledEmptyStateWarning = styled(EmptyStateWarning)`
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;
-
-export default StyledEmptyStateWarning;

static/app/views/replays/detail/noRowRenderer.tsx

@@ -1,9 +1,10 @@
 import {ReactNode} from 'react';
+import styled from '@emotion/styled';
 
 import {Button} from 'sentry/components/button';
+import EmptyStateWarning from 'sentry/components/emptyStateWarning';
 import {IconClose} from 'sentry/icons';
 import {t} from 'sentry/locale';
-import EmptyState from 'sentry/views/replays/detail/emptyState';
 
 type Props = {
   children: ReactNode;
@@ -13,11 +14,11 @@ type Props = {
 
 function NoRowRenderer({children, unfilteredItems, clearSearchTerm}: Props) {
   return unfilteredItems.length === 0 ? (
-    <EmptyState>
+    <StyledEmptyStateWarning>
       <p>{children}</p>
-    </EmptyState>
+    </StyledEmptyStateWarning>
   ) : (
-    <EmptyState>
+    <StyledEmptyStateWarning>
       <p>{t('No results found')}</p>
       <Button
         icon={<IconClose color="gray500" size="sm" isCircled />}
@@ -26,8 +27,17 @@ function NoRowRenderer({children, unfilteredItems, clearSearchTerm}: Props) {
       >
         {t('Clear filters')}
       </Button>
-    </EmptyState>
+    </StyledEmptyStateWarning>
   );
 }
 
+const StyledEmptyStateWarning = styled(EmptyStateWarning)`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
 export default NoRowRenderer;

static/app/views/replays/detail/trace/replayTransactionContext.tsx

@@ -21,6 +21,7 @@ import {
   makeEventView,
 } from 'sentry/utils/performance/quickTrace/utils';
 import useApi from 'sentry/utils/useApi';
+import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import type {ReplayRecord} from 'sentry/views/replays/types';
 
@@ -33,7 +34,6 @@ type InternalState = {
   detailsErrors: Error[];
   detailsRequests: number;
   detailsResponses: number;
-  didInit: boolean;
   indexComplete: boolean;
   indexError: undefined | Error;
   isFetching: boolean;
@@ -41,7 +41,6 @@ type InternalState = {
 };
 
 type ExternalState = {
-  didInit: boolean;
   errors: Error[];
   isFetching: boolean;
   traces: undefined | TraceFullDetailed[];
@@ -51,7 +50,6 @@ const INITIAL_STATE: InternalState = {
   detailsErrors: [],
   detailsRequests: 0,
   detailsResponses: 0,
-  didInit: false,
   indexComplete: true,
   indexError: undefined,
   isFetching: false,
@@ -67,11 +65,12 @@ type TxnContextProps = {
 const TxnContext = createContext<TxnContextProps>({
   eventView: null,
   fetchTransactionData: () => {},
-  state: {didInit: false, errors: [], isFetching: false, traces: []},
+  state: {errors: [], isFetching: false, traces: []},
 });
 
 function ReplayTransactionContext({children, replayRecord}: Options) {
   const api = useApi();
+  const location = useLocation();
   const organization = useOrganization();
 
   const [state, setState] = useState<InternalState>(INITIAL_STATE);
@@ -100,13 +99,13 @@ function ReplayTransactionContext({children, replayRecord}: Options) {
     });
   }, [replayRecord]);
 
-  const singleTracePayload = useMemo(() => {
+  const tracePayload = useMemo(() => {
     const start = getUtcDateString(replayRecord?.started_at.getTime());
     const end = getUtcDateString(replayRecord?.finished_at.getTime());
 
     const traceEventView = makeEventView({start, end});
-    return getTraceRequestPayload({eventView: traceEventView, location: {} as Location});
-  }, [replayRecord]);
+    return getTraceRequestPayload({eventView: traceEventView, location});
+  }, [replayRecord, location]);
 
   const fetchSingleTraceData = useCallback(
     async traceId => {
@@ -114,7 +113,7 @@ function ReplayTransactionContext({children, replayRecord}: Options) {
         const [trace, , _traceResp] = await doDiscoverQuery(
           api,
           `/organizations/${orgSlug}/events-trace/${traceId}/`,
-          singleTracePayload
+          tracePayload
         );
 
         setState(prev => ({
@@ -131,7 +130,7 @@ function ReplayTransactionContext({children, replayRecord}: Options) {
         }));
       }
     },
-    [api, orgSlug, singleTracePayload]
+    [api, orgSlug, tracePayload]
   );
 
   const fetchTransactionData = useCallback(async () => {
@@ -145,7 +144,6 @@ function ReplayTransactionContext({children, replayRecord}: Options) {
       detailsErrors: [],
       detailsRequests: 0,
       detailsResponses: 0,
-      didInit: true,
       indexComplete: false,
       indexError: undefined,
       isFetching: true,
@@ -198,23 +196,21 @@ function ReplayTransactionContext({children, replayRecord}: Options) {
 
         const pageLinks = listResp?.getResponseHeader('Link') ?? null;
         cursor = parseLinkHeader(pageLinks)?.next;
-        const indexComplete = !cursor.results;
-        setState(prev => ({...prev, indexComplete} as InternalState));
       } catch (indexError) {
-        setState(prev => ({...prev, indexError, indexComplete: true} as InternalState));
+        setState(prev => ({...prev, indexError} as InternalState));
         cursor = {cursor: '', results: false, href: ''} as ParsedHeader;
       }
     }
-  }, [api, fetchSingleTraceData, listEventView, orgSlug, replayRecord]);
 
-  const externalState = useMemo(() => internalToExternalState(state), [state]);
+    setState(prev => ({...prev, indexComplete: true} as InternalState));
+  }, [api, fetchSingleTraceData, listEventView, orgSlug, replayRecord]);
 
   return (
     <TxnContext.Provider
       value={{
         eventView: listEventView,
         fetchTransactionData,
-        state: externalState,
+        state: internalToExternalState(state),
       }}
     >
       {children}
@@ -226,7 +222,6 @@ function internalToExternalState({
   detailsErrors,
   detailsRequests,
   detailsResponses,
-  didInit,
   indexComplete,
   indexError,
   traces,
@@ -234,7 +229,6 @@ function internalToExternalState({
   const isComplete = indexComplete && detailsRequests === detailsResponses;
 
   return {
-    didInit,
     errors: indexError ? [indexError] : detailsErrors,
     isFetching: !isComplete,
     traces,
@@ -244,13 +238,9 @@ function internalToExternalState({
 export default ReplayTransactionContext;
 
 export const useFetchTransactions = () => {
-  const {fetchTransactionData, state} = useContext(TxnContext);
+  const {fetchTransactionData} = useContext(TxnContext);
 
-  useEffect(() => {
-    if (!state.isFetching && state.traces === undefined) {
-      fetchTransactionData();
-    }
-  }, [fetchTransactionData, state]);
+  useEffect(fetchTransactionData, [fetchTransactionData]);
 };
 
 export const useTransactionData = () => {

static/app/views/replays/detail/trace/trace.tsx

@@ -2,12 +2,9 @@ import styled from '@emotion/styled';
 
 import Loading from 'sentry/components/loadingIndicator';
 import Placeholder from 'sentry/components/placeholder';
-import {IconSad} from 'sentry/icons';
-import {t} from 'sentry/locale';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import TraceView from 'sentry/views/performance/traceDetails/traceView';
-import EmptyState from 'sentry/views/replays/detail/emptyState';
 import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
 import {
   useFetchTransactions,
@@ -22,49 +19,23 @@ type Props = {
 function Trace({replayRecord}: Props) {
   const location = useLocation();
   const organization = useOrganization();
-  const {
-    state: {didInit, errors, isFetching, traces},
-    eventView,
-  } = useTransactionData();
+  const {state, eventView} = useTransactionData();
 
   useFetchTransactions();
 
-  if (!replayRecord || !didInit || isFetching) {
-    // Show the blank screen until we start fetching, thats when you get a spinner
+  if (!replayRecord || !state.traces?.length) {
     return (
       <StyledPlaceholder height="100%">
-        {isFetching ? <Loading /> : null}
+        {state.isFetching && <Loading />}
       </StyledPlaceholder>
     );
   }
 
-  if (errors.length) {
-    // Same style as <EmptyStateWarning>
-    return (
-      <BorderedSection>
-        <EmptyState withIcon={false}>
-          <IconSad legacySize="54px" />
-          <p>{t('Unable to retrieve traces')}</p>
-        </EmptyState>
-      </BorderedSection>
-    );
-  }
-
-  if (!traces?.length) {
-    return (
-      <BorderedSection>
-        <EmptyState>
-          <p>{t('No traces found')}</p>
-        </EmptyState>
-      </BorderedSection>
-    );
-  }
-
   return (
     <FluidHeight>
       <TraceView
         meta={null}
-        traces={traces ?? null}
+        traces={state.traces ?? null}
         location={location}
         organization={organization}
         traceEventView={eventView!}
@@ -74,16 +45,9 @@ function Trace({replayRecord}: Props) {
   );
 }
 
-// This has the gray background, to match other loaders on Replay Details
 const StyledPlaceholder = styled(Placeholder)`
   border: 1px solid ${p => p.theme.border};
   border-radius: ${p => p.theme.borderRadius};
 `;
 
-// White background, to match the loaded component
-const BorderedSection = styled(FluidHeight)`
-  border: 1px solid ${p => p.theme.border};
-  border-radius: ${p => p.theme.borderRadius};
-`;
-
 export default Trace;