[APM] FIX trace waterfall loading logic to handle empty scenarios (#163397)

## Summary

Closes https://github.com/elastic/kibana/issues/154705

## List of Issues

- Trace Waterfall not clearing and persisting old data

![Trace Explorer Not
clearing](5302c5ed-0c92-44ab-81a5-115e32dc8ace)

- Infinite Loading of Trace Waterfall where no traces are present and
page is reloaded

![Infinite
Loading](c5ae1cda-099e-4968-96e5-ad85db38d83a)

- After Fixing these 2 issues, found issue with Container Height

![Container Height
Issue](7fc7ef1b-68dc-4f52-bc2f-c346cfd5f67e)

## All issues fixed

![All issues
resolved](227fe648-d6b9-4788-8961-7369f6ed621a)

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');
+    });
+  });
 });

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>
   );
 }

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 };
 }

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"
       />
     );