cache groups to prevent ui jumping

web/components/onboarding/group-selector-dialog.tsx

@@ -1,5 +1,5 @@
 import { sortBy } from 'lodash'
-import React from 'react'
+import React, { useRef } from 'react'
 
 import { Col } from 'web/components/layout/col'
 import { Title } from 'web/components/title'
@@ -9,6 +9,7 @@ import { useUser } from 'web/hooks/use-user'
 import { Modal } from 'web/components/layout/modal'
 import { PillButton } from 'web/components/buttons/pill-button'
 import { Button } from 'web/components/button'
+import { Group } from 'common/group'
 
 export default function GroupSelectorDialog(props: {
   open: boolean
@@ -19,11 +20,18 @@ export default function GroupSelectorDialog(props: {
   const groups = useGroups()
   const user = useUser()
   const memberGroupIds = useMemberGroupIds(user) || []
+  const cachedGroups = useRef<Group[]>()
 
-  const displayedGroups = sortBy(groups, [
+  if (groups && !cachedGroups.current) {
+    cachedGroups.current = groups
+  }
+
+  const displayedGroups = sortBy(cachedGroups.current ?? [], [
     (group) => -1 * group.totalMembers,
     (group) => -1 * group.totalContracts,
-  ]).slice(0, 100)
+  ])
+    .filter((group) => group.anyoneCanJoin)
+    .slice(0, 100)
 
   return (
     <Modal open={open} setOpen={setOpen}>
@@ -36,9 +44,7 @@ export default function GroupSelectorDialog(props: {
 
         <div className="scrollbar-hide items-start gap-2 overflow-x-auto">
           {user &&
-            displayedGroups.map(
+            displayedGroups.map((group) => (
-              (group) =>
-                group.anyoneCanJoin && (
               <PillButton
                 selected={memberGroupIds.includes(group.id)}
                 onSelect={() =>
@@ -50,8 +56,7 @@ export default function GroupSelectorDialog(props: {
               >
                 {group.name}
               </PillButton>
-                )
+            ))}
-            )}
         </div>
       </Col>
       <Col>