coder · aslilac · Jan 3, 2024 · Jan 3, 2024 · Jan 3, 2024 · Jan 3, 2024
diff --git a/site/src/@types/emoji-mart.d.ts b/site/src/@types/emoji-mart.d.ts
@@ -28,15 +28,17 @@ declare module "@emoji-mart/react" {
     | { unified: undefined; src: string }
     | { unified: string; src: undefined };
 
-  const EmojiPicker: React.FC<{
+  export interface EmojiMartProps {
     set: "native" | "apple" | "facebook" | "google" | "twitter";
     theme: "dark" | "light";
     data: unknown;
     custom: CustomCategory[];
     emojiButtonSize?: number;
     emojiSize?: number;
     onEmojiSelect: (emoji: EmojiData) => void;
-  }>;
+  }
+
+  const EmojiMart: React.FC<EmojiMartProps>;
 
-  export default EmojiPicker;
+  export default EmojiMart;
 }
diff --git a/site/src/components/IconField/EmojiPicker.tsx b/site/src/components/IconField/EmojiPicker.tsx
@@ -0,0 +1,40 @@
+import EmojiMart, { type EmojiMartProps } from "@emoji-mart/react";
+import data from "@emoji-mart/data/sets/14/twitter.json";
+import { type FC } from "react";
+import icons from "theme/icons.json";
+
+const custom = [
+  {
+    id: "icons",
+    name: "Icons",
+    emojis: icons.map((icon) => {
+      const id = icon.split(".")[0];
+
+      return {
+        id,
+        name: id,
+        keywords: id.split("-"),
+        skins: [{ src: `/icon/${icon}` }],
+      };
+    }),
+  },
+];
+
+type EmojiPickerProps = Omit<
+  EmojiMartProps,
+  "custom" | "data" | "set" | "theme"
+>;
+
+const EmojiPicker: FC<EmojiPickerProps> = (props) => {
+  return (
+    <EmojiMart
+      theme="dark"
+      set="twitter"
+      data={data}
+      custom={custom}
+      {...props}
+    />
+  );
+};
+
+export default EmojiPicker;
diff --git a/site/src/components/IconField/IconField.stories.tsx b/site/src/components/IconField/IconField.stories.tsx
@@ -1,6 +1,6 @@
 import { action } from "@storybook/addon-actions";
-import IconField from "./IconField";
 import type { Meta, StoryObj } from "@storybook/react";
+import { IconField } from "./IconField";
 
 const meta: Meta<typeof IconField> = {
   title: "components/IconField",

diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
@@ -2,17 +2,16 @@ import { css, Global, useTheme } from "@emotion/react";
 import Button from "@mui/material/Button";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
-import Picker from "@emoji-mart/react";
-import { type FC } from "react";
+import { type FC, lazy, Suspense } from "react";
+import { Loader } from "components/Loader/Loader";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { Stack } from "components/Stack/Stack";
-import data from "@emoji-mart/data/sets/14/twitter.json";
-import icons from "theme/icons.json";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "components/Popover/Popover";
+import { visuallyHidden } from "@mui/utils";
 
 // See: https://github.com/missive/emoji-mart/issues/51#issuecomment-287353222
 const urlFromUnifiedCode = (unified: string) =>
@@ -22,24 +21,12 @@ type IconFieldProps = TextFieldProps & {
   onPickEmoji: (value: string) => void;
 };
 
-const custom = [
-  {
-    id: "icons",
-    name: "Icons",
-    emojis: icons.map((icon) => {
-      const id = icon.split(".")[0];
+const EmojiPicker = lazy(() => import("./EmojiPicker"));
 
-      return {
-        id,
-        name: id,
-        keywords: id.split("-"),
-        skins: [{ src: `/icon/${icon}` }],
-      };
-    }),
-  },
-];
-
-const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
+export const IconField: FC<IconFieldProps> = ({
+  onPickEmoji,
+  ...textFieldProps
+}) => {
   if (
     typeof textFieldProps.value !== "string" &&
     typeof textFieldProps.value !== "undefined"
@@ -53,9 +40,9 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
   return (
     <Stack spacing={1}>
       <TextField
-        {...textFieldProps}
         fullWidth
         label="Icon"
+        {...textFieldProps}
         InputProps={{
           endAdornment: hasIcon ? (
             <InputAdornment
@@ -86,6 +73,18 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
         }}
       />
 
+      <Global
+        styles={css`
+          em-emoji-picker {
+            --rgb-background: ${theme.palette.background.paper};
+            --rgb-input: ${theme.palette.primary.main};
+            --rgb-color: ${theme.palette.text.primary};
+
+            // Hack to prevent the right side from being cut off
+            width: 350px;
+          }
+        `}
+      />
       <Popover>
         {(popover) => (
           <>
@@ -98,35 +97,31 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
               id="emoji"
               css={{ marginTop: 0, ".MuiPaper-root": { width: "auto" } }}
             >
-              <Global
-                styles={css`
-                  em-emoji-picker {
-                    --rgb-background: ${theme.palette.background.paper};
-                    --rgb-input: ${theme.palette.primary.main};
-                    --rgb-color: ${theme.palette.text.primary};
-
-                    // Hack to prevent the right side from being cut off
-                    width: 350px;
-                  }
-                `}
-              />
-              <Picker
-                set="twitter"
-                theme="dark"
-                data={data}
-                custom={custom}
-                onEmojiSelect={(emoji) => {
-                  const value = emoji.src ?? urlFromUnifiedCode(emoji.unified);
-                  onPickEmoji(value);
-                  popover.setIsOpen(false);
-                }}
-              />
+              <Suspense fallback={<Loader />}>
+                <EmojiPicker
+                  onEmojiSelect={(emoji) => {
+                    const value =
+                      emoji.src ?? urlFromUnifiedCode(emoji.unified);
+                    onPickEmoji(value);
+                    popover.setIsOpen(false);
+                  }}
+                />
+              </Suspense>
             </PopoverContent>
           </>
         )}
       </Popover>
+
+      {/* This component takes a long time to load (easily several seconds), so we
+      don't want to wait until the user actually clicks the button to start loading.
+      Unfortunately, React doesn't provide an API to start warming a lazy component,
+      so we just have to sneak it into the DOM, which is kind of annoying, but means
+      that users shouldn't ever spend time waiting for it to load. */}
+      <div css={{ ...visuallyHidden }}>
+        <Suspense>
+          <EmojiPicker onEmojiSelect={() => {}} />
+        </Suspense>
+      </div>
     </Stack>
   );
 };
-
-export default IconField;
diff --git a/site/src/components/IconField/LazyIconField.tsx b/site/src/components/IconField/LazyIconField.tsx
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -27,7 +27,7 @@ import {
   HelpTooltipText,
   HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
-import { LazyIconField } from "components/IconField/LazyIconField";
+import { IconField } from "components/IconField/IconField";
 import Link from "@mui/material/Link";
 import {
   HorizontalForm,
@@ -345,12 +345,11 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
             label="Description"
           />
 
-          <LazyIconField
+          <IconField
             {...getFieldHelpers("icon")}
             disabled={isSubmitting}
             onChange={onChangeTrimmed(form)}
             fullWidth
-            label="Icon"
             onPickEmoji={(value) => form.setFieldValue("icon", value)}
           />
         </FormFields>

diff --git a/site/src/pages/GroupsPage/CreateGroupPageView.tsx b/site/src/pages/GroupsPage/CreateGroupPageView.tsx
@@ -2,6 +2,7 @@ import TextField from "@mui/material/TextField";
 import { CreateGroupRequest } from "api/typesGenerated";
 import { FormFooter } from "components/FormFooter/FormFooter";
 import { FullPageForm } from "components/FullPageForm/FullPageForm";
+import { IconField } from "components/IconField/IconField";
 import { Margins } from "components/Margins/Margins";
 import { Stack } from "components/Stack/Stack";
 import { useFormik } from "formik";
@@ -58,12 +59,12 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
               fullWidth
               label="Display Name"
             />
-            <TextField
+            <IconField
               {...getFieldHelpers("avatar_url")}
               onChange={onChangeTrimmed(form)}
-              autoComplete="avatar url"
               fullWidth
               label="Avatar URL"
+              onPickEmoji={(value) => form.setFieldValue("avatar_url", value)}
             />
           </Stack>
           <FormFooter onCancel={onCancel} isLoading={isLoading} />

diff --git a/site/src/pages/GroupsPage/SettingsGroupPageView.tsx b/site/src/pages/GroupsPage/SettingsGroupPageView.tsx
@@ -3,7 +3,7 @@ import { Group } from "api/typesGenerated";
 import { FormFooter } from "components/FormFooter/FormFooter";
 import { FullPageForm } from "components/FullPageForm/FullPageForm";
 import { Loader } from "components/Loader/Loader";
-import { LazyIconField } from "components/IconField/LazyIconField";
+import { IconField } from "components/IconField/IconField";
 import { Margins } from "components/Margins/Margins";
 import { useFormik } from "formik";
 import { FC } from "react";
@@ -84,7 +84,7 @@ const UpdateGroupForm: FC<UpdateGroupFormProps> = ({
                 label="Display Name"
                 disabled={isEveryoneGroup(group)}
               />
-              <LazyIconField
+              <IconField
                 {...getFieldHelpers("avatar_url")}
                 onChange={onChangeTrimmed(form)}
                 fullWidth

diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
@@ -11,7 +11,7 @@ import {
   iconValidator,
 } from "utils/formUtils";
 import * as Yup from "yup";
-import { LazyIconField } from "components/IconField/LazyIconField";
+import { IconField } from "components/IconField/IconField";
 import {
   FormFields,
   FormSection,
@@ -126,7 +126,7 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
             rows={2}
           />
 
-          <LazyIconField
+          <IconField
             {...getFieldHelpers("icon")}
             disabled={isSubmitting}
             onChange={onChangeTrimmed(form)}