fix(ui): address banner not showing up on package actions page

react-app/src/components/ActionForm/index.tsx

@@ -152,11 +152,7 @@ export const ActionForm = <Schema extends SchemaWithEnforcableProps>({
       try {
         await mutateAsync(formData);
       } catch (error) {
-        throw Error(
-          `Error submitting form: ${
-            error?.message || error
-          }`,
-        );
+        throw Error(`Error submitting form: ${error?.message || error}`);
       }
 
       const { documentChecker, property } = documentPollerArgs;
@@ -168,23 +164,17 @@ export const ActionForm = <Schema extends SchemaWithEnforcableProps>({
         const poller = documentPoller(documentPollerId, documentChecker);
         await poller.startPollingData();
       } catch (error) {
-        const message = `${
-          error?.message || error
-        }`;
-        throw Error(message);
+        throw Error(`${error?.message || error}`);
       }
 
       const formOrigins = getFormOrigin({ authority, id });
 
-      navigate(formOrigins);
+      banner({
+        ...bannerPostSubmission,
+        pathnameToDisplayOn: formOrigins.pathname,
+      });
 
-      // artificially delaying allows the banner to be displayed after navigation
-      setTimeout(() => {
-        banner({
-          ...bannerPostSubmission,
-          pathnameToDisplayOn: formOrigins.pathname,
-        });
-      }, 50);
+      navigate(formOrigins);
     } catch (error) {
       console.error(error);
       banner({

react-app/src/components/Banner/banner.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Alert, AlertVariant } from "../Alert";
 import { Check, X } from "lucide-react";
 import { useLocation } from "react-router";
@@ -30,29 +30,42 @@ export const banner = (newBanner: Banner) => {
 };
 
 export const Banner = () => {
+  const bannerObserverRef = useRef<(() => void) | null>(null);
+
   const [activeBanner, setActiveBanner] = useState<Banner | null>(null);
   const { pathname } = useLocation();
+  const previousPathRef = useRef(pathname);
 
   const onClose = () => {
     bannerState.dismiss();
   };
 
   useEffect(() => {
-    const unsubscribe = bannerState.subscribe((banner) => {
-      if (banner) {
+    if (bannerObserverRef.current === null) {
+      bannerObserverRef.current = bannerState.subscribe((banner) => {
         setActiveBanner(banner);
-      } else {
-        setActiveBanner(null);
-      }
-    });
+      });
 
-    return unsubscribe;
+      return () => {
+        bannerObserverRef.current?.();
+        bannerObserverRef.current = null;
+      };
+    }
   }, []);
 
   useEffect(() => {
-    if (activeBanner && activeBanner.pathnameToDisplayOn !== pathname) {
-      onClose();
+    // only run cleanup if:
+    // 1. we've actually navigated (pathname changed from previous render)
+    // 2. there's an active banner to clean up
+    // 3. the banner's target pathname doesn't match where we navigated to
+    if (pathname !== previousPathRef.current) {
+      if (activeBanner && activeBanner.pathnameToDisplayOn !== pathname) {
+        onClose();
+      }
     }
+
+    // store current pathname for next render's comparison
+    previousPathRef.current = pathname;
   }, [pathname, activeBanner]);
 
   if (activeBanner && activeBanner.pathnameToDisplayOn === pathname) {