do not render hidden bags

src/components/Distribution/Bags.tsx

@@ -3,12 +3,13 @@ import BagBubble from "./Bag";
 import { getBucketObjects } from "./util";
 
 const Bags = (props: { show: boolean; bags: Bag[]; operator: Operator }) => {
-  const { bucketId, bags, operator } = props;
+  const { show, bucketId, bags, operator } = props;
   const [bagsWithObjects, setBags] = useState([]);
   useEffect(
     () =>
+      show &&
       getBucketObjects(bucketId).then((bags) => bags.length && setBags(bags)),
-    [bucketId]
+    [show, bucketId]
   );
   const findBag = (id: string) => bagsWithObjects.find((b) => b.id === id);
   return (

src/components/Distribution/Bucket.tsx

@@ -21,7 +21,11 @@ const BucketRow = (props: { bucket: Bucket }) => {
         <div className="col-1 p-2">{bags.length} bags</div>
         <OperatorFields operator={operators[0]} />
       </div>
-      {show ? <Bags bucketId={id} bags={bags} operator={operators[0]} /> : ``}
+      {show ? (
+        <Bags show={show} bucketId={id} bags={bags} operator={operators[0]} />
+      ) : (
+        ``
+      )}
     </>
   );
 };