Add Suspense boundary around Event Listeners panel (in case it suspen…

…ds outside of a transition) (#10559)

See comments on [go/r/e2d6a019-bb06-444c-965b-e938add7fcbf](https://app.replay.io/recording/elements-panel-flashes--e2d6a019-bb06-444c-965b-e938add7fcbf) for how I identified this.

Using React DevTools to force this panel into a suspended state, I confirmed that it no longer causes the entire secondary tool panel to fallback:
![Screenshot 2024-06-13 at 10 35 08 AM](https://github.com/replayio/devtools/assets/29597/02704304-c67a-4952-8804-08ff9dae19cd)

src/devtools/client/inspector/event-listeners/EventListenersApp.tsx

@@ -1,7 +1,10 @@
-import React, { useContext, useEffect, useMemo, useState } from "react";
+import { Suspense, useContext, useEffect, useMemo, useState } from "react";
 
 import { getSelectedDomNodeId } from "devtools/client/inspector/markup/reducers/markup";
+import { getSelectedNodeId } from "devtools/client/inspector/markup/selectors/markup";
 import { onViewSourceInDebugger } from "devtools/client/webconsole/actions/toolbox";
+import { InlineErrorBoundary } from "replay-next/components/errors/InlineErrorBoundary";
+import { PanelLoader } from "replay-next/components/PanelLoader";
 import { useMostRecentLoadedPause } from "replay-next/src/hooks/useMostRecentLoadedPause";
 import { objectCache } from "replay-next/src/suspense/ObjectPreviews";
 import { ReplayClientContext } from "shared/client/ReplayClientContext";
@@ -10,13 +13,24 @@ import {
   EventListenerWithFunctionInfo,
   NodeWithPreview,
 } from "ui/actions/eventListeners/eventListenerUtils";
-import { useAppDispatch } from "ui/setup/hooks";
-import { useAppSelector } from "ui/setup/hooks";
+import { useAppDispatch, useAppSelector } from "ui/setup/hooks";
 
 import { ExpandableItem } from "./ExpandableItem";
 import { XHTMLNode } from "./XHTMLNode";
 
-export const EventListenersApp = () => {
+export function EventListenersApp() {
+  const selectedNodeId = useAppSelector(getSelectedNodeId);
+
+  return (
+    <InlineErrorBoundary name="EventListeners" resetKey={selectedNodeId ?? undefined}>
+      <Suspense fallback={<PanelLoader />}>
+        <EventListenersAppSuspends />
+      </Suspense>
+    </InlineErrorBoundary>
+  );
+}
+
+function EventListenersAppSuspends() {
   const [listeners, setListeners] = useState<EventListenerWithFunctionInfo[]>([]);
   const selectedDomNodeId = useAppSelector(getSelectedDomNodeId);
   const dispatch = useAppDispatch();
@@ -149,4 +163,4 @@ export const EventListenersApp = () => {
       )}
     </div>
   );
-};
+}

src/devtools/client/inspector/markup/components/rules/index.tsx

@@ -3,15 +3,15 @@ import { Suspense } from "react";
 import { RulesPanelSuspends } from "devtools/client/inspector/markup/components/rules/RulesPanel";
 import { getSelectedNodeId } from "devtools/client/inspector/markup/selectors/markup";
 import { InlineErrorBoundary } from "replay-next/components/errors/InlineErrorBoundary";
-import Loader from "replay-next/components/Loader";
+import { PanelLoader } from "replay-next/components/PanelLoader";
 import { useAppSelector } from "ui/setup/hooks";
 
 export function RulesPanel() {
   const selectedNodeId = useAppSelector(getSelectedNodeId);
 
   return (
     <InlineErrorBoundary name="RulesPanel" resetKey={selectedNodeId ?? undefined}>
-      <Suspense fallback={<Loader />}>
+      <Suspense fallback={<PanelLoader />}>
         <RulesPanelSuspends />
       </Suspense>
     </InlineErrorBoundary>