🔧 Display <Empty/> when there are no alerts

nest_frontend/components/interactive/BoxAlerts.js

@@ -1,15 +1,29 @@
-import React from "react"
+import React, { useMemo } from "react"
 import BoxFullScrollable from "../base/BoxFullScrollable"
 import SummaryAlert from "./SummaryAlert"
 import useStrings from "../../hooks/useStrings"
+import Empty from "./Empty"
 
 
 export default function BoxAlerts({ alerts, destroy, running, ...props }) {
     const strings = useStrings()
 
+    const content = useMemo(
+        () => {
+            if(alerts.length === 0) {
+                return <Empty/>
+            }
+
+            return alerts.map(alert => (
+                <SummaryAlert alert={alert} destroy={() => destroy(alert["id"])} running={running}/>
+            ))
+        },
+        [alerts, running, destroy]
+    )
+
     return (
         <BoxFullScrollable header={strings.alertTitle} {...props}>
-            {alerts.map(alert => <SummaryAlert alert={alert} destroy={() => destroy(alert["id"])} running={running}/>)}
+            {content}
         </BoxFullScrollable>
     )
 }