routelit-client 0.3.1 → 0.4.1

package/dist/components/checkbox.d.ts

@@ -2,5 +2,6 @@ declare const Checkbox: import("react").NamedExoticComponent<{
     label: string;
     checked: boolean;
     required?: boolean;
+    caption?: string;
 } & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange">>;
 export default Checkbox;

package/dist/components/image.d.ts

@@ -2,5 +2,5 @@ interface ImageProps extends React.HTMLAttributes<HTMLImageElement> {
     src: string;
     alt: string;
 }
-declare function Image({ src, alt, ...props }: ImageProps): import("react/jsx-runtime").JSX.Element;
+declare function Image({ src, alt, children: _, ...props }: ImageProps): import("react/jsx-runtime").JSX.Element;
 export default Image;

package/dist/components/input.d.ts

@@ -1,4 +1,4 @@
-declare function TextInputComponent({ id, label, value, type, ...props }: {
+declare function TextInputComponent({ id, label, value, type, children: _, ...props }: {
     id: string;
     label?: string;
 } & React.InputHTMLAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;

package/dist/core/actions.d.ts

@@ -1,5 +1,8 @@
 export declare function applyAddAction(componentsTree: RouteLitComponent[], action: AddAction): void;
 export declare function applyRemoveAction(componentsTree: RouteLitComponent[], action: RemoveAction): void;
+export declare function applySetAction(componentsTree: RouteLitComponent[], action: SetAction): void;
 export declare function applyUpdateAction(componentsTree: RouteLitComponent[], action: UpdateAction): void;
+export declare function applyFreshBoundaryAction(componentsTree: RouteLitComponent[], action: FreshBoundaryAction): void;
+export declare function removeStaleComponents(componentsTree: RouteLitComponent[]): void;
 export declare function prependAddressToActions(actionResponse: ActionsResponse, address: number[]): ActionsResponse;
 export declare function applyActions(componentsTree: RouteLitComponent[], actions: Action[]): void;

package/dist/core/manager.d.ts

@@ -19,10 +19,17 @@ export declare class RouteLitManager {
     private address?;
     private lastURL?;
     private initialized;
+    private abortController?;
+    private actionAccumulator;
+    private currentTarget?;
+    private throttleTimer?;
+    private lastExecutionTime;
     constructor(props: RouteLitManagerProps);
     getLastURL: () => string;
     handleEvent: (e: CustomEvent<UIEventPayload>) => Promise<void>;
     handleError: (e: Error) => void;
+    batchAction: (action: Action, shouldNotify?: boolean) => void;
+    private flushActions;
     applyActions: (actionsResp: ActionsResponse, shouldNotify?: boolean) => void;
     private initializeDOM;
     initialize: () => void;

package/dist/core/react-renderer.d.ts

@@ -4,5 +4,5 @@ interface Props {
     manager: RouteLitManager;
     componentStore: ComponentStore;
 }
-declare function ReactRenderer({ manager, componentStore }: Props): import("react/jsx-runtime").JSX.Element;
+declare function ReactRenderer({ manager, componentStore }: Props): import("react/jsx-runtime").JSX.Element | null;
 export default ReactRenderer;

package/dist/core/server-api.d.ts

@@ -1 +1,2 @@
-export declare function sendEvent(event: CustomEvent<UIEventPayload>, fragmentId?: string): Promise<ActionsResponse>;
+export declare function sendEvent(event: CustomEvent<UIEventPayload>, fragmentId: string | undefined, abortController: AbortController): Promise<ActionsResponse>;
+export declare function sendEventStream(event: CustomEvent<UIEventPayload>, fragmentId: string | undefined, abortController: AbortController): AsyncGenerator<ActionsResponse | Action>;

package/dist/routelit-client.es.dev.js

@@ -671,42 +671,92 @@ immer.setUseStrictShallowCopy.bind(immer);
 immer.applyPatches.bind(immer);
 immer.createDraft.bind(immer);
 immer.finishDraft.bind(immer);
-function applyAddAction(componentsTree, action) {
+function getTarget(componentsTree, address) {
   let target = componentsTree;
-  for (let i = 0; i < action.address.length - 1; i++) {
-    if (!target[action.address[i]].children) {
-      target[action.address[i]].children = [];
+  for (let i = 0; i < address.length - 1; i++) {
+    if (!target[address[i]].children) {
+      target[address[i]].children = [];
     }
-    target = target[action.address[i]].children;
+    target = target[address[i]].children;
   }
+  return target;
+}
+function applyAddAction(componentsTree, action) {
+  const target = getTarget(componentsTree, action.address);
   target.splice(action.address[action.address.length - 1], 0, action.element);
 }
 function applyRemoveAction(componentsTree, action) {
-  let target = componentsTree;
-  for (let i = 0; i < action.address.length - 1; i++) {
-    if (!target[action.address[i]].children) {
-      target[action.address[i]].children = [];
-    }
-    target = target[action.address[i]].children;
-  }
+  const target = getTarget(componentsTree, action.address);
   target.splice(action.address[action.address.length - 1], 1);
 }
+function applySetAction(componentsTree, action) {
+  const target = getTarget(componentsTree, action.address);
+  const targetIndex = action.address[action.address.length - 1];
+  const oldElement = target[targetIndex];
+  if (oldElement && oldElement.children) {
+    action.element.children = oldElement.children;
+  }
+  target[targetIndex] = action.element;
+  if (action.element.stale) {
+    action.element.stale = void 0;
+  }
+}
 function applyUpdateAction(componentsTree, action) {
-  let target = componentsTree;
-  for (let i = 0; i < action.address.length - 1; i++) {
-    if (!target[action.address[i]].children) {
-      target[action.address[i]].children = [];
+  const target = getTarget(componentsTree, action.address);
+  const element2 = target[action.address[action.address.length - 1]];
+  element2.props = action.props;
+  if (element2.stale) {
+    element2.stale = void 0;
+  }
+}
+function applyFreshBoundaryAction(componentsTree, action) {
+  const target = getTarget(componentsTree, action.address);
+  const staleStartsAt = action.address[action.address.length - 1] + 1;
+  const markLeafNodesStale = (components) => {
+    let staleCount = 0;
+    for (const component of components) {
+      if (!component.children || component.children.length === 0) {
+        component.stale = true;
+        staleCount++;
+      } else {
+        const childrenStaleCount = markLeafNodesStale(component.children);
+        if (childrenStaleCount === component.children.length) {
+          component.stale = true;
+        }
+      }
     }
-    target = target[action.address[i]].children;
+    return staleCount;
+  };
+  const componentsToProcess = target.slice(staleStartsAt);
+  markLeafNodesStale(componentsToProcess);
+}
+function removeStaleComponents(componentsTree) {
+  var _a;
+  for (let i = componentsTree.length - 1; i >= 0; i--) {
+    const component = componentsTree[i];
+    if (component.stale) {
+      componentsTree.splice(i, 1);
+    } else if ((_a = component.children) == null ? void 0 : _a.length) {
+      removeStaleComponents(component.children);
+    }
+  }
+}
+function handleNoChangeAction(componentsTree, action) {
+  const target = getTarget(componentsTree, action.address);
+  const element2 = target[action.address[action.address.length - 1]];
+  if (element2.stale) {
+    element2.stale = void 0;
   }
-  target[action.address[action.address.length - 1]].props = action.props;
+}
+function prependAddressToActionsArray(actionResponses, address) {
+  return actionResponses.map((action) => {
+    return { ...action, address: address.concat(action.address) };
+  });
 }
 function prependAddressToActions(actionResponse, address) {
   return {
     ...actionResponse,
-    actions: actionResponse.actions.map((action) => {
-      return { ...action, address: address.concat(action.address) };
-    })
+    actions: prependAddressToActionsArray(actionResponse.actions, address)
   };
 }
 function applyActions(componentsTree, actions) {
@@ -718,19 +768,35 @@ function applyActions(componentsTree, actions) {
       case "remove":
         applyRemoveAction(componentsTree, action);
         break;
+      case "set":
+        applySetAction(componentsTree, action);
+        break;
       case "update":
         applyUpdateAction(componentsTree, action);
         break;
+      case "fresh_boundary":
+        applyFreshBoundaryAction(componentsTree, action);
+        break;
+      case "last":
+        removeStaleComponents(componentsTree);
+        break;
+      case "no_change":
+        handleNoChangeAction(componentsTree, action);
+        break;
     }
   });
 }
-async function sendEvent(event, fragmentId) {
+async function* sendEventStream(event, fragmentId, abortController) {
   if (event.detail.type === "navigate") {
-    return await handleNavigate(event);
+    yield* handleNavigateStream(
+      event,
+      abortController
+    );
+    return;
   }
-  return await handleUIEvent(event, fragmentId);
+  yield* handleUIEventStream(event, fragmentId, abortController);
 }
-async function sendUIEvent(url, body, headers) {
+async function* sendUIEventStream(url, body, headers, abortController) {
   const res = await fetch(url, {
     method: "POST",
     body: JSON.stringify(body),
@@ -738,14 +804,65 @@ async function sendUIEvent(url, body, headers) {
       "Content-Type": "application/json",
       ...headers
     },
-    credentials: "include"
+    credentials: "include",
+    signal: abortController == null ? void 0 : abortController.signal
   });
   if (!res.ok) {
     throw new Error("Failed to send server event");
   }
-  return res.json();
+  const contentType = res.headers.get("content-type") || "";
+  if (contentType.includes("application/jsonlines")) {
+    yield* parseJsonLinesStream(res);
+  } else {
+    const response = await res.json();
+    yield response;
+  }
+}
+function maybeParseJson(line) {
+  const trimmedLine = line.trim();
+  if (trimmedLine) {
+    try {
+      const jsonObject = JSON.parse(trimmedLine);
+      return jsonObject;
+    } catch (error) {
+      console.warn("Failed to parse final JSON chunk:", error);
+    }
+  }
+  return void 0;
 }
-async function handleUIEvent(event, fragmentId) {
+async function* parseJsonLinesStream(response) {
+  var _a;
+  const reader = (_a = response.body) == null ? void 0 : _a.getReader();
+  if (!reader) {
+    throw new Error("Response body is not readable");
+  }
+  const decoder = new TextDecoder();
+  let buffer = "";
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        const jsonObject = maybeParseJson(buffer);
+        if (jsonObject) {
+          yield jsonObject;
+        }
+        break;
+      }
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+      buffer = lines.pop() || "";
+      for (const line of lines) {
+        const jsonObject = maybeParseJson(line);
+        if (jsonObject) {
+          yield jsonObject;
+        }
+      }
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+async function* handleUIEventStream(event, fragmentId, abortController) {
   const { id, type, formId, ...data } = event.detail;
   const url = new URL(window.location.href);
   const body = {
@@ -757,9 +874,9 @@ async function handleUIEvent(event, fragmentId) {
     },
     fragmentId
   };
-  return await sendUIEvent(url.toString(), body);
+  yield* sendUIEventStream(url.toString(), body, void 0, abortController);
 }
-async function handleNavigate(event) {
+async function* handleNavigateStream(event, abortController) {
   const { href, id, type, lastURL, ...data } = event.detail;
   const body = {
     uiEvent: {
@@ -775,14 +892,15 @@ async function handleNavigate(event) {
   if (lastURL) {
     headers["X-Referer"] = lastURL;
   }
-  const response = await sendUIEvent(href, body, headers);
+  yield* sendUIEventStream(href, body, headers, abortController);
   if (event.detail.replace) {
     window.history.replaceState(null, "", href);
   } else {
     window.history.pushState(null, "", href);
   }
-  return response;
 }
+const EMPTY_ARRAY = [];
+const THROTTLE_DELAY = 125;
 class RouteLitManager {
   constructor(props) {
     __publicField(this, "listeners", []);
@@ -796,23 +914,45 @@ class RouteLitManager {
     __publicField(this, "address");
     __publicField(this, "lastURL");
     __publicField(this, "initialized", false);
+    __publicField(this, "abortController");
+    __publicField(this, "actionAccumulator", []);
+    __publicField(this, "currentTarget");
+    __publicField(this, "throttleTimer");
+    __publicField(this, "lastExecutionTime", 0);
     __publicField(this, "getLastURL", () => {
       var _a;
       return ((_a = this.parentManager) == null ? void 0 : _a.getLastURL()) ?? this.lastURL;
     });
     __publicField(this, "handleEvent", async (e) => {
-      if (e.detail.type === "navigate" && this.fragmentId)
+      if (this.abortController) {
+        this.abortController.abort();
+      }
+      this.abortController = new AbortController();
+      if (e.detail.type === "navigate" && this.fragmentId) {
         return;
+      }
       if (e.detail.type === "navigate") {
         const detail = e.detail;
+        detail.lastURL = this.lastURL;
         this.lastURL = detail.href.startsWith("http") ? detail.href : window.location.origin + detail.href;
       }
       this._error = void 0;
       this._isLoading = true;
       this.notifyIsLoading();
       try {
-        const response = await sendEvent(e, this.fragmentId);
-        this.applyActions(response);
+        this.abortController = new AbortController();
+        const responseStream = sendEventStream(
+          e,
+          this.fragmentId,
+          this.abortController
+        );
+        for await (const response of responseStream) {
+          if ("type" in response) {
+            this.batchAction(response);
+          } else {
+            this.applyActions(response);
+          }
+        }
       } catch (error) {
         this.handleError(error);
       } finally {
@@ -825,6 +965,45 @@ class RouteLitManager {
       this._error = e;
       this.notifyError();
     });
+    __publicField(this, "batchAction", (action, shouldNotify = true) => {
+      var _a;
+      if (this.fragmentId && action.target === "app") {
+        (_a = this.parentManager) == null ? void 0 : _a.batchAction(action, shouldNotify);
+        return;
+      }
+      const targetKey = action.target || "fragment";
+      if (this.currentTarget && this.currentTarget !== targetKey) {
+        this.flushActions(shouldNotify);
+      }
+      this.currentTarget = targetKey;
+      this.actionAccumulator.push(action);
+      const now = Date.now();
+      if (now - this.lastExecutionTime >= THROTTLE_DELAY) {
+        this.flushActions(shouldNotify);
+      } else {
+        if (!this.throttleTimer) {
+          const remainingTime = THROTTLE_DELAY - (now - this.lastExecutionTime);
+          this.throttleTimer = setTimeout(() => {
+            this.flushActions(shouldNotify);
+          }, remainingTime);
+        }
+      }
+    });
+    __publicField(this, "flushActions", (shouldNotify) => {
+      if (this.actionAccumulator.length === 0 || !this.currentTarget) return;
+      if (this.throttleTimer) {
+        clearTimeout(this.throttleTimer);
+        this.throttleTimer = void 0;
+      }
+      this.lastExecutionTime = Date.now();
+      const actionsResponse = {
+        actions: [...this.actionAccumulator],
+        target: this.currentTarget
+      };
+      this.actionAccumulator = [];
+      this.currentTarget = void 0;
+      this.applyActions(actionsResponse, shouldNotify);
+    });
     __publicField(this, "applyActions", (actionsResp, shouldNotify = true) => {
       var _a;
       if (this.fragmentId) {
@@ -879,6 +1058,15 @@ class RouteLitManager {
       document.dispatchEvent(navigateEvent);
     });
     __publicField(this, "terminate", () => {
+      if (this.actionAccumulator.length > 0) {
+        this.flushActions(true);
+      }
+      if (this.throttleTimer) {
+        clearTimeout(this.throttleTimer);
+        this.throttleTimer = void 0;
+      }
+      this.actionAccumulator = [];
+      this.currentTarget = void 0;
       document.removeEventListener(
         "routelit:event",
         this.handleEvent
@@ -891,9 +1079,9 @@ class RouteLitManager {
     __publicField(this, "getComponentsTree", () => {
       var _a;
       if (this.address) {
-        return ((_a = this.parentManager) == null ? void 0 : _a.getAtAddress(this.address)) ?? [];
+        return ((_a = this.parentManager) == null ? void 0 : _a.getAtAddress(this.address)) ?? EMPTY_ARRAY;
       }
-      return this.componentsTree;
+      return this.componentsTree ?? EMPTY_ARRAY;
     });
     __publicField(this, "isLoading", () => {
       var _a;
@@ -1020,7 +1208,10 @@ function useFormId() {
   return context.id;
 }
 function Form({ id, children }) {
-  return /* @__PURE__ */ jsx(FormContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("form", { id, "data-testid": id, children }) });
+  function handleSubmit(e) {
+    e.preventDefault();
+  }
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("form", { id, "data-testid": id, onSubmit: handleSubmit, children }) });
 }
 const RouteLitContext = createContext({
   manager: void 0,
@@ -1094,26 +1285,38 @@ function useError() {
     manager2.getError
   );
 }
+function getElement(name2, key, address, props, children, componentStore2) {
+  if (name2 === "fragment") {
+    return /* @__PURE__ */ jsx(Fragment, { id: props.id, address }, key);
+  }
+  const Component = componentStore2.get(name2);
+  if (!Component) return null;
+  return /* @__PURE__ */ jsx(Component, { id: key, ...props, children: children == null ? void 0 : children.map(renderComponentTree(componentStore2)) }, key);
+}
+function FinalComponent({
+  c,
+  componentStore: componentStore2
+}) {
+  const element2 = useMemo(
+    () => getElement(c.name, c.key, c.address, c.props, c.children, componentStore2),
+    [c.name, c.key, c.address, c.props, c.children, componentStore2]
+  );
+  const className = c.stale ? "rl-component rl-stale" : "rl-component";
+  return /* @__PURE__ */ jsx("div", { className, children: element2 });
+}
+const renderComponentTree = (componentStore2) => (c) => {
+  return /* @__PURE__ */ jsx(FinalComponent, { c, componentStore: componentStore2 }, c.key);
+};
 function ReactRenderer({ manager: manager2, componentStore: componentStore2 }) {
   const componentsTree = useSyncExternalStore(
     manager2.subscribe,
     manager2.getComponentsTree
   );
-  useSyncExternalStore(
-    componentStore2.subscribe,
-    componentStore2.getVersion
-  );
-  const renderComponentTree = (c) => {
-    var _a;
-    const Component = componentStore2.get(c.name);
-    if (!Component) return null;
-    if (c.name === "fragment") {
-      const { id, ...props } = c.props;
-      return /* @__PURE__ */ jsx(Fragment, { id, address: c.address, ...props }, c.key);
-    }
-    return /* @__PURE__ */ jsx(Component, { id: c.key, ...c.props, children: (_a = c.children) == null ? void 0 : _a.map(renderComponentTree) }, c.key);
-  };
-  return /* @__PURE__ */ jsx("div", { className: "rl-container", children: componentsTree.map(renderComponentTree) });
+  useSyncExternalStore(componentStore2.subscribe, componentStore2.getVersion);
+  if (!(componentsTree == null ? void 0 : componentsTree.length)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "rl-container", children: componentsTree == null ? void 0 : componentsTree.map(renderComponentTree(componentStore2)) });
 }
 function Fragment({ id, address }) {
   const { componentStore: componentStore2, manager: parentManager } = useRouteLitContext();
@@ -20671,7 +20874,7 @@ function Markdown({ body, allowUnsafeHtml = false }) {
   );
   return /* @__PURE__ */ jsx(Markdown$1, { rehypePlugins, children: body });
 }
-function Image({ src, alt, ...props }) {
+function Image({ src, alt, children: _, ...props }) {
   return /* @__PURE__ */ jsx("img", { src, alt, ...props });
 }
 const Button = memo(function Button2({
@@ -20681,21 +20884,8 @@ const Button = memo(function Button2({
   ...props
 }) {
   const dispatch = useFormDispatcher(id, eventName);
-  const isLoading = useIsLoading();
-  const handleClick = useCallback(() => {
-    dispatch({});
-  }, [dispatch]);
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      id,
-      type: "button",
-      disabled: isLoading,
-      ...props,
-      onClick: handleClick,
-      children: text2
-    }
-  );
+  const handleClick = useCallback(() => dispatch({}), [dispatch]);
+  return /* @__PURE__ */ jsx("button", { id, type: "button", ...props, onClick: handleClick, children: text2 });
 });
 Button.displayName = "Button";
 const Expander = ({
@@ -20726,10 +20916,10 @@ const Checkbox = memo(function Checkbox2({
   checked,
   id,
   required,
+  children: _,
   ...props
 }) {
   const dispatchChange = useFormDispatcherWithAttr(id, "change", "checked");
-  const isLoading = useIsLoading();
   const onChange = useCallback(
     (e) => {
       dispatchChange(e.target.checked);
@@ -20741,7 +20931,6 @@ const Checkbox = memo(function Checkbox2({
       "input",
       {
         ...props,
-        disabled: isLoading || props.disabled,
         type: "checkbox",
         id,
         checked,
@@ -20758,13 +20947,13 @@ const Checkbox = memo(function Checkbox2({
 });
 Checkbox.displayName = "Checkbox";
 function CheckboxGroupOption(props) {
-  const { id, value, onChange, isLoading } = props;
+  const { id, value, onChange } = props;
   const option = typeof props.option === "string" ? { label: props.option, value: props.option } : props.option;
   return /* @__PURE__ */ jsxs("div", { className: "rl-form-flex-control", children: [
     /* @__PURE__ */ jsx(
       "input",
       {
-        disabled: isLoading || option.disabled,
+        disabled: option.disabled,
         type: "checkbox",
         value: option.value,
         id: `${id}-${option.value}`,
@@ -20787,7 +20976,6 @@ const CheckboxGroup = memo(function CheckboxGroup2({
   flexDirection = "col"
 }) {
   const dispatchChange = useFormDispatcherWithAttr(id, "change", "value");
-  const isLoading = useIsLoading();
   const onChange = useCallback(
     (e) => {
       const newValue = e.target.checked ? [...value, e.target.value] : value.filter((v) => v !== e.target.value);
@@ -20807,7 +20995,6 @@ const CheckboxGroup = memo(function CheckboxGroup2({
         id,
         value,
         onChange,
-        isLoading,
         option
       },
       typeof option === "string" ? option : option.value
@@ -20845,9 +21032,9 @@ function TextInputComponent({
   label,
   value,
   type = "text",
+  children: _,
   ...props
 }) {
-  const isLoading = useIsLoading();
   const dispatchChange = useFormDispatcherWithAttr(id, "change", "value");
   const lastValueRef = useRef(value);
   function handleChange(newValue) {
@@ -20877,7 +21064,6 @@ function TextInputComponent({
         type,
         id,
         ...props,
-        disabled: isLoading || props.disabled,
         onBlur: handleBlur,
         onKeyDown: handleKeyDown,
         defaultValue: value
@@ -20888,13 +21074,13 @@ function TextInputComponent({
 const TextInput = memo(TextInputComponent);
 TextInput.displayName = "TextInput";
 function RadioGroupOption(props) {
-  const { id, value, onChange, isLoading } = props;
+  const { id, value, onChange } = props;
   const option = typeof props.option === "string" ? { label: props.option, value: props.option } : props.option;
   return /* @__PURE__ */ jsxs("div", { className: "rl-form-flex-control", children: [
     /* @__PURE__ */ jsx(
       "input",
       {
-        disabled: isLoading || option.disabled,
+        disabled: option.disabled,
         type: "radio",
         value: option.value,
         id: `${id}-${option.value}`,
@@ -20917,7 +21103,6 @@ const RadioGroup = memo(function RadioGroup2({
   flexDirection = "col"
 }) {
   const dispatchChange = useFormDispatcherWithAttr(id, "change", "value");
-  const isLoading = useIsLoading();
   const onChange = useCallback(
     (e) => {
       dispatchChange(e.target.value);
@@ -20936,7 +21121,6 @@ const RadioGroup = memo(function RadioGroup2({
         id,
         value,
         onChange,
-        isLoading,
         option
       },
       typeof option === "string" ? option : option.value
@@ -20954,9 +21138,9 @@ const Select = memo(function Select2({
   required,
   value,
   options,
+  children: _,
   ...props
 }) {
-  const isLoading = useIsLoading();
   const dispatchChange = useFormDispatcherWithAttr(id, "change", "value");
   const lastValueRef = useRef(value);
   function handleChange(e) {
@@ -20977,10 +21161,9 @@ const Select = memo(function Select2({
       {
         id,
         value,
-        onChange: handleChange,
         ...props,
-        disabled: isLoading,
         required,
+        onChange: handleChange,
         children: options.map((option) => /* @__PURE__ */ jsx(
           SelectOption,
           {
@@ -20999,7 +21182,6 @@ function TextareaComponent({
   value,
   ...props
 }) {
-  const isLoading = useIsLoading();
   const dispatchChange = useFormDispatcherWithAttr(id, "change", "value");
   const lastValueRef = useRef(value);
   function handleChange(newValue) {
@@ -21028,7 +21210,6 @@ function TextareaComponent({
       {
         id,
         ...props,
-        disabled: isLoading || props.disabled,
         onBlur: handleBlur,
         onKeyDown: handleKeyDown,
         defaultValue: value