Fix(webapp) onboarding fixes (#3189)

### Fixes and improvements to the onboarding questions: 

**This change is worth double checking @matt-aitken** 
- Update to the Button.tsx file: it now takes `isLoading` that shows a
spinner in the middle of the button (replacing the button text and any
icons) and sets it to `disabled`. It does this nicely by keeping the
button width the same so there's no layout shift.

**Other fixes**
- Fixes an issue where if you type a custom option in the "What
technologies do you use" question, it doesn't check the list to see if
it matches. Now it checks the box if you've typed an option from that
list.
- When we randomize the list of onboarding question options, we now
store the position they appeared in the list

Author: samejr

apps/webapp/app/components/onboarding/TechnologyPicker.tsx

@@ -210,11 +210,22 @@ export function TechnologyPicker({
 
   const addCustomValue = useCallback(() => {
     const trimmed = otherInputValue.trim();
-    if (trimmed && !customValues.includes(trimmed) && !value.includes(trimmed)) {
+    if (!trimmed) return;
+
+    const matchedOption = TECHNOLOGY_OPTIONS.find(
+      (opt) => opt.toLowerCase() === trimmed.toLowerCase()
+    );
+
+    if (matchedOption) {
+      if (!value.includes(matchedOption)) {
+        onChange([...value, matchedOption]);
+      }
+    } else if (!customValues.includes(trimmed) && !value.includes(trimmed)) {
       onCustomValuesChange([...customValues, trimmed]);
-      setOtherInputValue("");
     }
-  }, [otherInputValue, customValues, onCustomValuesChange, value]);
+
+    setOtherInputValue("");
+  }, [otherInputValue, customValues, onCustomValuesChange, value, onChange]);
 
   const handleOtherKeyDown = useCallback(
     (e: React.KeyboardEvent) => {

apps/webapp/app/components/primitives/Buttons.tsx

@@ -1,10 +1,18 @@
 import { Link, type LinkProps, NavLink, type NavLinkProps } from "@remix-run/react";
-import React, { forwardRef, type ReactNode, useImperativeHandle, useRef } from "react";
+import React, {
+  forwardRef,
+  type ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
 import { type ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { cn } from "~/utils/cn";
 import { ShortcutKey } from "./ShortcutKey";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./Tooltip";
 import { Icon, type RenderIcon } from "./Icon";
+import { Spinner } from "./Spinner";
 
 const sizes = {
   small: {
@@ -180,6 +188,7 @@ export type ButtonContentPropsType = {
   tooltip?: ReactNode;
   iconSpacing?: string;
   hideShortcutKey?: boolean;
+  isLoading?: boolean;
 };
 
 export function ButtonContent(props: ButtonContentPropsType) {
@@ -196,7 +205,19 @@ export function ButtonContent(props: ButtonContentPropsType) {
     tooltip,
     iconSpacing,
     hideShortcutKey,
+    isLoading,
   } = props;
+
+  const [showSpinner, setShowSpinner] = useState(false);
+  useEffect(() => {
+    if (!isLoading) {
+      setShowSpinner(false);
+      return;
+    }
+    const timer = setTimeout(() => setShowSpinner(true), 200);
+    return () => clearTimeout(timer);
+  }, [isLoading]);
+
   const variation = allVariants.variant[props.variant];
 
   const btnClassName = cn(allVariants.$all, variation.button);
@@ -217,56 +238,64 @@ export function ButtonContent(props: ButtonContentPropsType) {
 
   const buttonContent = (
     <div className={cn("flex", fullWidth ? "" : "w-fit text-xxs", btnClassName, className)}>
-      <div
-        className={cn(
-          textAlignLeft ? "text-left" : "justify-center",
-          "flex w-full items-center",
-          iconSpacingClassName,
-          iconSpacing
-        )}
-      >
-        {LeadingIcon && (
-          <Icon
-            icon={LeadingIcon}
-            className={cn(
-              iconClassName,
-              variation.icon,
-              leadingIconClassName,
-              "shrink-0 justify-start"
-            )}
-          />
-        )}
+      <div className={cn("relative", "flex w-full items-center")}>
+        <div
+          className={cn(
+            textAlignLeft ? "text-left" : "justify-center",
+            "flex w-full items-center",
+            iconSpacingClassName,
+            iconSpacing,
+            showSpinner && "invisible"
+          )}
+        >
+          {LeadingIcon && (
+            <Icon
+              icon={LeadingIcon}
+              className={cn(
+                iconClassName,
+                variation.icon,
+                leadingIconClassName,
+                "shrink-0 justify-start"
+              )}
+            />
+          )}
 
-        {text &&
-          (typeof text === "string" ? (
-            <span className={cn("mx-auto grow self-center truncate", textColorClassName)}>
-              {text}
-            </span>
-          ) : (
-            <>{text}</>
-          ))}
-
-        {shortcut &&
-          !tooltip &&
-          props.shortcutPosition === "before-trailing-icon" &&
-          renderShortcutKey()}
-
-        {TrailingIcon && (
-          <Icon
-            icon={TrailingIcon}
-            className={cn(
-              iconClassName,
-              variation.icon,
-              trailingIconClassName,
-              "shrink-0 justify-end"
-            )}
-          />
-        )}
+          {text &&
+            (typeof text === "string" ? (
+              <span className={cn("mx-auto grow self-center truncate", textColorClassName)}>
+                {text}
+              </span>
+            ) : (
+              <>{text}</>
+            ))}
+
+          {shortcut &&
+            !tooltip &&
+            props.shortcutPosition === "before-trailing-icon" &&
+            renderShortcutKey()}
 
-        {shortcut &&
-          !tooltip &&
-          (!props.shortcutPosition || props.shortcutPosition === "after-trailing-icon") &&
-          renderShortcutKey()}
+          {TrailingIcon && (
+            <Icon
+              icon={TrailingIcon}
+              className={cn(
+                iconClassName,
+                variation.icon,
+                trailingIconClassName,
+                "shrink-0 justify-end"
+              )}
+            />
+          )}
+
+          {shortcut &&
+            !tooltip &&
+            (!props.shortcutPosition || props.shortcutPosition === "after-trailing-icon") &&
+            renderShortcutKey()}
+        </div>
+        {showSpinner && (
+          <span className="absolute inset-0 flex items-center justify-center">
+            <Spinner className="size-3.5" color="white" />
+          </span>
+        )}
       </div>
     </div>
   );
@@ -298,6 +327,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonPropsType>(
     const innerRef = useRef<HTMLButtonElement>(null);
     useImperativeHandle(ref, () => innerRef.current as HTMLButtonElement);
 
+    const isDisabled = disabled || props.isLoading;
+
     useShortcutKeys({
       shortcut: props.shortcut,
       action: (e) => {
@@ -307,14 +338,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonPropsType>(
           e.stopPropagation();
         }
       },
-      disabled: disabled || !props.shortcut,
+      disabled: isDisabled || !props.shortcut,
     });
 
     return (
       <button
         className={cn("group/button outline-none focus-custom", props.fullWidth ? "w-full" : "")}
         type={type}
-        disabled={disabled}
+        disabled={isDisabled}
         onClick={onClick}
         name={props.name}
         value={props.value}

apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx

@@ -22,7 +22,7 @@ import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
 import { Select, SelectItem } from "~/components/primitives/Select";
-import { ButtonSpinner } from "~/components/primitives/Spinner";
+
 import { prisma } from "~/db.server";
 import { featuresForRequest } from "~/features.server";
 import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
@@ -169,6 +169,8 @@ const schema = z.object({
   technologiesOther: z.string().optional(),
   goals: z.string().optional(),
   goalsOther: z.string().optional(),
+  workingOnPositions: z.string().optional(),
+  goalsPositions: z.string().optional(),
 });
 
 export const action: ActionFunction = async ({ request, params }) => {
@@ -200,10 +202,25 @@ export const action: ActionFunction = async ({ request, params }) => {
     }
   }
 
+  const numberArraySchema = z.array(z.number());
+  function safeParseNumberArray(value: string | undefined): number[] | undefined {
+    if (!value) return undefined;
+    try {
+      const result = numberArraySchema.safeParse(JSON.parse(value));
+      return result.success && result.data.length > 0 ? result.data : undefined;
+    } catch {
+      return undefined;
+    }
+  }
+
   const onboardingData: Record<string, Prisma.InputJsonValue> = {};
 
   const workingOn = safeParseStringArray(submission.value.workingOn);
-  if (workingOn) onboardingData.workingOn = workingOn;
+  if (workingOn) {
+    onboardingData.workingOn = workingOn;
+    const workingOnPositions = safeParseNumberArray(submission.value.workingOnPositions);
+    if (workingOnPositions) onboardingData.workingOnPositions = workingOnPositions;
+  }
 
   if (submission.value.workingOnOther) {
     onboardingData.workingOnOther = submission.value.workingOnOther;
@@ -216,7 +233,11 @@ export const action: ActionFunction = async ({ request, params }) => {
   if (technologiesOther) onboardingData.technologiesOther = technologiesOther;
 
   const goals = safeParseStringArray(submission.value.goals);
-  if (goals) onboardingData.goals = goals;
+  if (goals) {
+    onboardingData.goals = goals;
+    const goalsPositions = safeParseNumberArray(submission.value.goalsPositions);
+    if (goalsPositions) onboardingData.goalsPositions = goalsPositions;
+  }
 
   if (submission.value.goalsOther) {
     onboardingData.goalsOther = submission.value.goalsOther;
@@ -376,6 +397,13 @@ export default function Page() {
                 <InputGroup>
                   <Label>What are you working on?</Label>
                   <input type="hidden" name="workingOn" value={JSON.stringify(selectedWorkingOn)} />
+                  <input
+                    type="hidden"
+                    name="workingOnPositions"
+                    value={JSON.stringify(
+                      selectedWorkingOn.map((v) => shuffledWorkingOn.indexOf(v) + 1)
+                    )}
+                  />
                   <MultiSelectField
                     value={selectedWorkingOn}
                     setValue={setSelectedWorkingOn}
@@ -421,6 +449,13 @@ export default function Page() {
                 <InputGroup>
                   <Label>What are you trying to do with Trigger.dev?</Label>
                   <input type="hidden" name="goals" value={JSON.stringify(selectedGoals)} />
+                  <input
+                    type="hidden"
+                    name="goalsPositions"
+                    value={JSON.stringify(
+                      selectedGoals.map((v) => shuffledGoals.indexOf(v) + 1)
+                    )}
+                  />
                   <MultiSelectField
                     value={selectedGoals}
                     setValue={setSelectedGoals}
@@ -445,13 +480,8 @@ export default function Page() {
 
                 <FormButtons
                   confirmButton={
-                    <Button
-                      type="submit"
-                      variant={"primary/small"}
-                      disabled={isLoading}
-                      TrailingIcon={isLoading ? ButtonSpinner : undefined}
-                    >
-                      {isLoading ? "Creating…" : "Create"}
+                    <Button type="submit" variant={"primary/small"} isLoading={isLoading}>
+                      Create
                     </Button>
                   }
                   cancelButton={

apps/webapp/app/routes/_app.orgs.new/route.tsx

@@ -220,7 +220,7 @@ export default function NewOrganizationPage() {
 
               <FormButtons
                 confirmButton={
-                  <Button type="submit" variant={"primary/small"} disabled={isLoading}>
+                  <Button type="submit" variant={"primary/small"} isLoading={isLoading}>
                     Create
                   </Button>
                 }