fix: eager load all deps for link

web/app/routes/_layout/_pages/_protected/links/-bottom-bar.tsx

@@ -65,7 +65,7 @@ export const LinkBottomBar: React.FC = () => {
   const [, setGlobalLinkFormExceptionRefsAtom] = useAtom(
     globalLinkFormExceptionRefsAtom,
   )
-  const { me } = useAccount({ root: { personalLinks: [] } })
+  const { me } = useAccount({ root: { personalLinks: [{}] } })
   const personalLink = useCoState(PersonalLink, editId as ID<PersonalLink>)
 
   const cancelBtnRef = React.useRef<HTMLButtonElement>(null)

web/app/routes/_layout/_pages/_protected/links/-link-form.tsx

@@ -153,8 +153,10 @@ export const LinkForm: React.FC<LinkFormProps> = ({
   })
 
   const topicName = form.watch("topic")
-  const findTopic =
+  const findTopic = React.useMemo(
-    me && Topic.findUnique({ topicName }, JAZZ_GLOBAL_GROUP_ID, me)
+    () => me && Topic.findUnique({ topicName }, JAZZ_GLOBAL_GROUP_ID, me),
+    [topicName, me],
+  )
 
   const selectedTopic = useCoState(Topic, findTopic, {})
 

web/app/routes/_layout/_pages/_protected/links/-list.tsx

@@ -67,7 +67,15 @@ const LinkList: React.FC<LinkListProps> = () => {
 
   const { deleteLink } = useLinkActions()
   const confirm = useConfirm()
-  const { me } = useAccount({ root: { personalLinks: [{}] } })
+  const { me } = useAccount({
+    root: {
+      personalLinks: [
+        {
+          topic: [],
+        },
+      ],
+    },
+  })
 
   const personalLinks = me?.root.personalLinks || []
   const filteredLinks = personalLinks.filter((link) => {
@@ -268,9 +276,7 @@ const LinkList: React.FC<LinkListProps> = () => {
           <div className="relative flex h-full grow flex-col items-stretch overflow-hidden">
             <div className="flex h-full w-[calc(100%+0px)] flex-col overflow-hidden pr-0">
               <div className="relative overflow-y-auto overflow-x-hidden [scrollbar-gutter:auto]">
-                {sortedLinks.map(
+                {sortedLinks.map((linkItem, index) => (
-                  (linkItem, index) =>
-                    linkItem && (
                   <LinkItem
                     key={linkItem.id}
                     isActive={activeItemIndex === index}
@@ -299,8 +305,7 @@ const LinkList: React.FC<LinkListProps> = () => {
                     data-keyboard-active={keyboardActiveIndex === index}
                     ref={(el) => setElementRef(el, index)}
                   />
-                    ),
+                ))}
-                )}
               </div>
             </div>
           </div>