fix: Prevent Flashbar from delaying render when not using animations

pages/flashbar/interactive.page.tsx

@@ -13,7 +13,8 @@ export default function InteractiveFlashbar() {
   };
 
   const add = (type: FlashbarProps.Type, hasHeader = false) => {
-    setItems(items => [generateItem({ type, id: nextId.current.toString(), dismiss, hasHeader }), ...items]);
+    const newItem = generateItem({ type, id: nextId.current.toString(), dismiss, hasHeader });
+    setItems(items => [newItem, ...items]);
     nextId.current = nextId.current + 1;
   };
 
@@ -26,15 +27,14 @@ export default function InteractiveFlashbar() {
   };
 
   const addToBottom = (type: FlashbarProps.Type, hasHeader = false) => {
-    setItems(items => [...items, generateItem({ type, dismiss, hasHeader, id: nextId.current.toString() })]);
+    const newItem = generateItem({ type, dismiss, hasHeader, id: nextId.current.toString() });
+    setItems(items => [...items, newItem]);
     nextId.current = nextId.current + 1;
   };
 
   const removeAndAddToBottom = (type: FlashbarProps.Type, hasHeader = false) => {
-    setItems(items => [
-      generateItem({ type, dismiss, hasHeader, id: nextId.current.toString() }),
-      ...items.slice(1, items.length),
-    ]);
+    const newItem = generateItem({ type, dismiss, hasHeader, id: nextId.current.toString() });
+    setItems(items => [newItem, ...items.slice(1, items.length)]);
     nextId.current = nextId.current + 1;
   };
 

src/flashbar/__tests__/common.tsx

@@ -0,0 +1,37 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import createWrapper, { FlashbarWrapper } from '../../../lib/components/test-utils/dom';
+import { render } from '@testing-library/react';
+import { FlashbarProps } from '../interfaces';
+import Button from '../../../lib/components/button';
+import Flashbar from '../../../lib/components/flashbar';
+
+export function createFlashbarWrapper(element: React.ReactElement) {
+  return createWrapper(render(element).container).findFlashbar()!;
+}
+
+export function findList(flashbar: FlashbarWrapper) {
+  return flashbar.find('ul');
+}
+
+export function testFlashDismissal({ stackItems }: { stackItems: boolean }) {
+  const App = () => {
+    const [items, setItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>([]);
+    const onDismiss = () => setItems([]);
+    const onAdd = () => setItems([{ content: 'The content', id: '1', dismissible: true, onDismiss }]);
+    return (
+      <>
+        <Button onClick={onAdd}>Add an item</Button>
+        <Flashbar stackItems={stackItems} items={items} />
+      </>
+    );
+  };
+  const appWrapper = createWrapper(render(<App />).container);
+  expect(appWrapper.findFlashbar()!.findItems()).toHaveLength(0);
+  appWrapper.findButton()!.click();
+  const foundItems = appWrapper.findFlashbar()!.findItems();
+  expect(foundItems).toHaveLength(1);
+  foundItems![0]!.findDismissButton()!.click();
+  expect(appWrapper.findFlashbar()!.findItems()).toHaveLength(0);
+}