fix(dashboard): Add empty state to customer group select

packages/dashboard/src/lib/components/shared/customer-group-selector.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@/vdb/components/ui/button.js';
-import { Command, CommandItem, CommandList } from '@/vdb/components/ui/command.js';
+import { Command, CommandEmpty, CommandItem, CommandList } from '@/vdb/components/ui/command.js';
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
@@ -27,7 +27,7 @@ export interface CustomerGroupSelectorProps {
 export function CustomerGroupSelector(props: CustomerGroupSelectorProps) {
     const [open, setOpen] = useState(false);
 
-    const { data: groups } = useQuery({
+    const { data: groups, isLoading } = useQuery({
         queryKey: ['customerGroups'],
         queryFn: () =>
             api.query(customerGroupsDocument, {
@@ -54,6 +54,9 @@ export function CustomerGroupSelector(props: CustomerGroupSelectorProps) {
                                 {group.name}
                             </CommandItem>
                         ))}
+                        <CommandEmpty>
+                            {isLoading ? <Trans>Loading...</Trans> : <Trans>No results</Trans>}
+                        </CommandEmpty>
                     </CommandList>
                 </Command>
             </PopoverContent>