Skip to content

Issue (bug): Async toast height not updating after Loading → Success; hover causes bouncing #1

Description

@Mike-Lobbezoo

Hi,

I’m seeing a layout issue when using the async toast flow in the Blazor Sonner implementation.

What happens

The toast first renders in the Loading state (e.g., title = “Loading…”). This initial toast gets a certain height.

When the async task completes, I update the same toast to Success, where the title/description text is longer.

The toast content updates, but the toast height does not recalculate correctly, so the success text is clipped / the container keeps the smaller “Loading” height.

Weird hover behavior

After the success update (with longer text), hovering the toast causes the height to bounce/jump when moving the mouse on and off the toast.

Expected

When the toast is updated from Loading → Success with larger content, the toast container should resize to fit the new content.
Hovering should not change layout/height (no jumping).

Minimal example

Toast.Async(
    FetchDataAsync(),
    t =>
    {
        t.Loading = "Loading...";
        t.Success = data => $"{data} toast has been added";
        t.SuccessDescription = data => $"Extra details about the toast: {data}";
        t.Error = ex => ex.Message;
    }
);

Thanks!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions