From 7a6620f3eee228821b671dee2c65e61038086bb8 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom@getoutline.com>
Date: Thu, 26 Feb 2026 18:01:39 -0500
Subject: [PATCH] fix: Flashing empty state in mention menu

---
 app/editor/components/MentionMenu.tsx | 285 +++++++++++++-------------
 1 file changed, 142 insertions(+), 143 deletions(-)

diff --git a/app/editor/components/MentionMenu.tsx b/app/editor/components/MentionMenu.tsx
index da341bdf8a..7e916dedb1 100644
--- a/app/editor/components/MentionMenu.tsx
+++ b/app/editor/components/MentionMenu.tsx
@@ -82,154 +82,153 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
   // Computed in the render body so MobX observer can track store access
   // (e.g. searchSuppressed). Previously this lived inside a useEffect which
   // runs outside the reactive context and triggered MobX warnings.
-  const items: MentionItem[] =
-    actorId && !loading
-      ? users
-          .findByQuery(search, { maxResults: maxResultsInSection })
-          .map(
-            (user) =>
-              ({
-                name: "mention",
-                icon: (
-                  <Flex
-                    align="center"
-                    justify="center"
-                    style={{ width: 24, height: 24 }}
-                  >
-                    <Avatar
-                      model={user}
-                      alt={t("Profile picture")}
-                      size={AvatarSize.Small}
-                    />
-                  </Flex>
-                ),
-                title: user.name,
-                section: UserSection,
-                appendSpace: true,
-                attrs: {
-                  id: uuidv4(),
-                  type: MentionType.User,
-                  modelId: user.id,
-                  actorId,
-                  label: user.name,
-                },
-              }) as MentionItem
-          )
-          .concat(
-            groups
-              .findByQuery(search, { maxResults: maxResultsInSection })
-              .map((group) => ({
-                name: "mention",
-                icon: (
-                  <Flex
-                    align="center"
-                    justify="center"
-                    style={{ width: 24, height: 24, marginRight: 4 }}
-                  >
-                    <GroupAvatar group={group} size={AvatarSize.Small} />
-                  </Flex>
-                ),
-                title: group.name,
-                subtitle: t("{{ count }} members", {
-                  count: group.memberCount,
-                }),
-                section: GroupSection,
-                appendSpace: true,
-                attrs: {
-                  id: uuidv4(),
-                  type: MentionType.Group,
-                  modelId: group.id,
-                  actorId,
-                  label: group.name,
-                },
-              }))
-          )
-          .concat(
-            documents
-              .findByQuery(search, { maxResults: maxResultsInSection })
-              .map(
-                (doc) =>
-                  ({
-                    name: "mention",
-                    icon: doc.icon ? (
-                      <Icon
-                        value={doc.icon}
-                        initial={doc.initial}
-                        color={doc.color ?? undefined}
-                      />
-                    ) : (
-                      <DocumentIcon />
-                    ),
-                    title: doc.title,
-                    subtitle: doc.collectionId ? (
-                      <DocumentBreadcrumb
-                        document={doc}
-                        onlyText
-                        reverse
-                        maxDepth={2}
-                      />
-                    ) : undefined,
-                    section: DocumentsSection,
-                    appendSpace: true,
-                    attrs: {
-                      id: uuidv4(),
-                      type: MentionType.Document,
-                      modelId: doc.id,
-                      actorId,
-                      label: doc.title,
-                    },
-                  }) as MentionItem
-              )
-          )
-          .concat(
-            collections
-              .findByQuery(search, { maxResults: maxResultsInSection })
-              .map(
-                (collection) =>
-                  ({
-                    name: "mention",
-                    icon: collection.icon ? (
-                      <Icon
-                        value={collection.icon}
-                        initial={collection.initial}
-                        color={collection.color ?? undefined}
-                      />
-                    ) : (
-                      <CollectionIcon />
-                    ),
-                    title: collection.name,
-                    section: CollectionsSection,
-                    appendSpace: true,
-                    attrs: {
-                      id: uuidv4(),
-                      type: MentionType.Collection,
-                      modelId: collection.id,
-                      actorId,
-                      label: collection.name,
-                    },
-                  }) as MentionItem
-              )
-          )
-          .concat([
-            {
-              name: "link",
-              icon: <PlusIcon />,
-              title: search?.trim(),
-              section: DocumentsSection,
-              subtitle: t("Create a new doc"),
-              visible: !!search && !isEmail(search),
-              priority: -1,
+  const items: MentionItem[] = actorId
+    ? users
+        .findByQuery(search, { maxResults: maxResultsInSection })
+        .map(
+          (user) =>
+            ({
+              name: "mention",
+              icon: (
+                <Flex
+                  align="center"
+                  justify="center"
+                  style={{ width: 24, height: 24 }}
+                >
+                  <Avatar
+                    model={user}
+                    alt={t("Profile picture")}
+                    size={AvatarSize.Small}
+                  />
+                </Flex>
+              ),
+              title: user.name,
+              section: UserSection,
               appendSpace: true,
               attrs: {
                 id: uuidv4(),
-                type: MentionType.Document,
-                modelId: uuidv4(),
+                type: MentionType.User,
+                modelId: user.id,
                 actorId,
-                label: search,
+                label: user.name,
               },
-            } as MentionItem,
-          ])
-      : [];
+            }) as MentionItem
+        )
+        .concat(
+          groups
+            .findByQuery(search, { maxResults: maxResultsInSection })
+            .map((group) => ({
+              name: "mention",
+              icon: (
+                <Flex
+                  align="center"
+                  justify="center"
+                  style={{ width: 24, height: 24, marginRight: 4 }}
+                >
+                  <GroupAvatar group={group} size={AvatarSize.Small} />
+                </Flex>
+              ),
+              title: group.name,
+              subtitle: t("{{ count }} members", {
+                count: group.memberCount,
+              }),
+              section: GroupSection,
+              appendSpace: true,
+              attrs: {
+                id: uuidv4(),
+                type: MentionType.Group,
+                modelId: group.id,
+                actorId,
+                label: group.name,
+              },
+            }))
+        )
+        .concat(
+          documents
+            .findByQuery(search, { maxResults: maxResultsInSection })
+            .map(
+              (doc) =>
+                ({
+                  name: "mention",
+                  icon: doc.icon ? (
+                    <Icon
+                      value={doc.icon}
+                      initial={doc.initial}
+                      color={doc.color ?? undefined}
+                    />
+                  ) : (
+                    <DocumentIcon />
+                  ),
+                  title: doc.title,
+                  subtitle: doc.collectionId ? (
+                    <DocumentBreadcrumb
+                      document={doc}
+                      onlyText
+                      reverse
+                      maxDepth={2}
+                    />
+                  ) : undefined,
+                  section: DocumentsSection,
+                  appendSpace: true,
+                  attrs: {
+                    id: uuidv4(),
+                    type: MentionType.Document,
+                    modelId: doc.id,
+                    actorId,
+                    label: doc.title,
+                  },
+                }) as MentionItem
+            )
+        )
+        .concat(
+          collections
+            .findByQuery(search, { maxResults: maxResultsInSection })
+            .map(
+              (collection) =>
+                ({
+                  name: "mention",
+                  icon: collection.icon ? (
+                    <Icon
+                      value={collection.icon}
+                      initial={collection.initial}
+                      color={collection.color ?? undefined}
+                    />
+                  ) : (
+                    <CollectionIcon />
+                  ),
+                  title: collection.name,
+                  section: CollectionsSection,
+                  appendSpace: true,
+                  attrs: {
+                    id: uuidv4(),
+                    type: MentionType.Collection,
+                    modelId: collection.id,
+                    actorId,
+                    label: collection.name,
+                  },
+                }) as MentionItem
+            )
+        )
+        .concat([
+          {
+            name: "link",
+            icon: <PlusIcon />,
+            title: search?.trim(),
+            section: DocumentsSection,
+            subtitle: t("Create a new doc"),
+            visible: !!search && !isEmail(search),
+            priority: -1,
+            appendSpace: true,
+            attrs: {
+              id: uuidv4(),
+              type: MentionType.Document,
+              modelId: uuidv4(),
+              actorId,
+              label: search,
+            },
+          } as MentionItem,
+        ])
+    : [];
 
   const handleSelect = useCallback(
     async (item: MentionItem) => {