Enhancing User Experience: Customizing Dismissal for ESHOPMAN Loading Toasts in Your HubSpot Storefronts

Enhancing User Experience: Customizing Dismissal for ESHOPMAN Loading Toasts in Your HubSpot Storefronts

In the world of headless commerce with ESHOPMAN, providing clear and actionable feedback to users is paramount, especially during long-running operations like deploying a storefront to HubSpot CMS or processing complex orders via the ESHOPMAN Admin API. Our ESHOPMAN UI component library includes a robust toast notification system to keep users informed. However, a recent community insight highlighted a specific behavior within the toast.loading() utility that ESHOPMAN developers and merchants should be aware of.

The Challenge: Non-Dismissable Loading Toasts

It was observed that ESHOPMAN's toast.loading() function, designed for indicating ongoing processes, does not respect the dismissable prop. This means that even if you explicitly set dismissable: true when calling a loading toast, the standard 'X' (close) button will not render, preventing users from manually dismissing the notification.

This behavior stems from the internal implementation of the loading function within ESHOPMAN's UI utilities. Let's look at the core of the issue:

function loading(title, props = { position: DEFAULT_TOAST_POSITION }) {
    return create("loading", title, { ...props, dismissable: false });
}

As you can see, the dismissable: false property is unconditionally spread into the toast's configuration, effectively overriding any dismissable: true passed by the caller. This contrasts with other toast variants (like success or error) which correctly forward the dismissable prop.

Impact on ESHOPMAN Storefronts and Admin Operations

This limitation has a notable impact, particularly for operations that require indefinite loading states. For instance, if you're using toast.loading() with duration: Infinity (a common pattern for deployment or progress indicators within the ESHOPMAN Admin Hub or custom storefront applications), the toast will remain on screen until it's programmatically dismissed. This can obscure underlying dashboard controls or storefront elements, potentially hindering the user experience.

Workaround for ESHOPMAN Developers

While the ESHOPMAN team reviews this behavior for a potential future update, a practical workaround exists for developers needing user-dismissable loading toasts. You can implement a custom 'Hide' action button within your toast configuration that triggers a programmatic dismissal:

import { toast } from "@eshopman/ui";

toast.loading("Deploying storefront to HubSpot CMS…", {
  id: "deployment-toast",
  duration: Infinity,
  // The dismissable: true prop will be ignored here, so we add a custom action
  action: {
    label: "Hide",
    onClick: () => toast.dismiss("deployment-toast"),
  },
});

This approach provides users with a clear option to dismiss the loading toast when they deem it appropriate, restoring control over their ESHOPMAN Admin UI or custom storefront interface.

Expected Behavior and Community Call

Ideally, the toast.loading() function should respect the caller's dismissable prop, perhaps defaulting to false to preserve current behavior, but allowing it to be overridden to true. A simple adjustment like { dismissable: false, ...props } (if the default should be non-dismissable) or simply forwarding props (if the default should be dismissable, aligning with other toast types) would resolve this.

This insight underscores the value of community contributions to ESHOPMAN's continuous improvement. By sharing observations and workarounds, we collectively enhance the ESHOPMAN experience for all developers and merchants building powerful headless commerce solutions on HubSpot CMS.