diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/e2e/read_only_user/transaction_details/transaction_details.cy.ts b/x-pack/plugins/apm/ftr_e2e/cypress/e2e/read_only_user/transaction_details/transaction_details.cy.ts
index dd73051be9f2e..6886fc582f631 100644
--- a/x-pack/plugins/apm/ftr_e2e/cypress/e2e/read_only_user/transaction_details/transaction_details.cy.ts
+++ b/x-pack/plugins/apm/ftr_e2e/cypress/e2e/read_only_user/transaction_details/transaction_details.cy.ts
@@ -151,4 +151,30 @@ describe('Transaction details', () => {
       });
     });
   });
+
+  describe('when changing filters which results in no trace samples', () => {
+    it('trace waterfall must reset to empty state', () => {
+      cy.visitKibana(
+        `/app/apm/services/opbeans-java/transactions/view?${new URLSearchParams(
+          {
+            ...timeRange,
+            transactionName: 'GET /api/product',
+          }
+        )}`
+      );
+
+      cy.getByTestSubj('apmWaterfallButton').should('exist');
+
+      cy.getByTestSubj('apmUnifiedSearchBar')
+        .type(`_id: "123"`)
+        .type('{enter}');
+
+      cy.getByTestSubj('apmWaterfallButton').should('not.exist');
+      cy.getByTestSubj('apmNoTraceFound').should('exist');
+
+      cy.reload();
+
+      cy.getByTestSubj('apmNoTraceFound').should('exist');
+    });
+  });
 });
diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.tsx
index 0c05b945c1b70..47642ebbdc6dc 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.tsx
@@ -20,7 +20,7 @@ import { useApmServiceContext } from '../../../../context/apm_service/use_apm_se
 import { useAnyOfApmParams } from '../../../../hooks/use_apm_params';
 import { useTimeRange } from '../../../../hooks/use_time_range';
 import { DurationDistributionChartWithScrubber } from '../../../shared/charts/duration_distribution_chart_with_scrubber';
-import { HeightRetainer } from '../../../shared/height_retainer';
+import { ResettingHeightRetainer } from '../../../shared/height_retainer/resetting_height_container';
 import { fromQuery, push, toQuery } from '../../../shared/links/url_helpers';
 import { TransactionTab } from '../waterfall_with_summary/transaction_tabs';
 import { useTransactionDistributionChartData } from './use_transaction_distribution_chart_data';
@@ -99,7 +99,7 @@ export function TransactionDistribution({
   );
 
   return (
-    <HeightRetainer>
+    <ResettingHeightRetainer reset={!traceId}>
       <div data-test-subj="apmTransactionDistributionTabContent">
         <DurationDistributionChartWithScrubber
           onChartSelection={onChartSelection}
@@ -138,6 +138,6 @@ export function TransactionDistribution({
           onShowCriticalPathChange={onShowCriticalPathChange}
         />
       </div>
-    </HeightRetainer>
+    </ResettingHeightRetainer>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/use_waterfall_fetcher.ts b/x-pack/plugins/apm/public/components/app/transaction_details/use_waterfall_fetcher.ts
index 81e0d736aee19..a01bb00ea0e44 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_details/use_waterfall_fetcher.ts
+++ b/x-pack/plugins/apm/public/components/app/transaction_details/use_waterfall_fetcher.ts
@@ -56,7 +56,10 @@ export function useWaterfallFetcher({
     [traceId, start, end, transactionId]
   );
 
-  const waterfall = useMemo(() => getWaterfall(data), [data]);
+  const waterfall = useMemo(
+    () => getWaterfall(traceId ? data : INITIAL_DATA),
+    [data, traceId]
+  );
 
   return { waterfall, status, error };
 }
diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/index.tsx
index e19400490133b..a14572f089137 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/index.tsx
@@ -60,8 +60,10 @@ export function WaterfallWithSummary<TSample extends {}>({
   const isLoading =
     waterfallFetchResult.status === FETCH_STATUS.LOADING ||
     traceSamplesFetchStatus === FETCH_STATUS.LOADING;
+  // When traceId is not present, call to waterfallFetchResult will not be initiated
   const isSucceded =
-    waterfallFetchResult.status === FETCH_STATUS.SUCCESS &&
+    (waterfallFetchResult.status === FETCH_STATUS.SUCCESS ||
+      waterfallFetchResult.status === FETCH_STATUS.NOT_INITIATED) &&
     traceSamplesFetchStatus === FETCH_STATUS.SUCCESS;
 
   useEffect(() => {
@@ -96,6 +98,7 @@ export function WaterfallWithSummary<TSample extends {}>({
             })}
           </div>
         }
+        data-test-subj="apmNoTraceFound"
         titleSize="s"
       />
     );