🔧 Add status text to the GroupListBox

frontend/src/components/group/GroupListBox.tsx

@@ -2,6 +2,8 @@ import {Box, Heading} from "@steffo/bluelib-react"
 import * as React from "react"
 import {ManagedViewSet} from "../../hooks/useManagedViewSet"
 import {SophonResearchGroup} from "../../types/SophonTypes"
+import {Empty} from "../elements/Empty"
+import {Loading} from "../elements/Loading"
 import {GroupResourcePanel} from "./GroupResourcePanel"
 
 
@@ -11,6 +13,19 @@ export interface GroupListBoxProps {
 
 
 export function GroupListBox({viewSet}: GroupListBoxProps): JSX.Element {
+    const resources = React.useMemo(
+        () => {
+            if(!viewSet.resources) {
+                return <Loading/>
+            }
+            if(viewSet.resources.length === 0) {
+                return <Empty>This Sophon instance has no groups.</Empty>
+            }
+            return viewSet.resources?.map(res => <GroupResourcePanel resource={res} key={res.value.slug}/>)
+        },
+        [viewSet],
+    )
+
     return (
         <Box>
             <Heading level={3}>
@@ -19,7 +34,7 @@ export function GroupListBox({viewSet}: GroupListBoxProps): JSX.Element {
             <p>
                 Research groups are groups of people that work together on one or more research projects.
             </p>
-            {viewSet.resources?.map(res => <GroupResourcePanel resource={res} key={res.value.slug}/>)}
+            {resources}
         </Box>
     )
 }