Skip to content

Render Location #13

@catlincox

Description

@catlincox

Great work on the library, I really like the default look for the toast component. However, feel free to close this issue as it might not be a real issue, just a clarification on where the toaster component should be in the tree of nodes. This might be pertaining only to how qwik loads bundles and such, but I have noticed if I put the toaster in the bottom of a layout then it is not loaded at all until, I scroll to the bottom of the document.

Example would be if I have the following layout, the toast is not loaded until the user scrolls to the bottom of the page.

export default component$(() => {
    return (
        <>
            <NavigationBar/>
            <main class="mx-auto max-w-7xl px-3 py-20">
                <Slot/>
            </main>
            <WebsiteFooter/>
            <Toaster richColors={true} closeButton={true} />
        </>
    );
});

Yet the other way if, I move the componet for the toaster to the top as such below, the component loads instantly and the toast notifications work. However, the issue arises when using route actions that pertain to reload the page. I changed mine to use server actions in order to compensate the reload or spa reset for the scrolling behavior. I am not sure if utilizing a context from the qwik framework to store the current slotted toast would be sufficient and instead specify to add things to a context. I would like to hear your thoughts on it. The below code works just fine as long as there is not page refresh that isn't towards the top of the layout.

export default component$(() => {
    return (
        <>
            <Toaster richColors={true} closeButton={true} />
            <NavigationBar/>
            <main class="mx-auto max-w-7xl px-3 py-20">
                <Slot/>
            </main>
            <WebsiteFooter/>
        </>
    );
});

Please let me know if this library is going to stay supported. If it was a toy project, I will convert the code internally so that way I have control over the code.

Thank you,

P.S. The library works great out of the box, this one is far better than my initial solution for a toastify type implementation for the Qwik framework. If the functionality is intended on how Qwik works, I would suggest updating the documentation to specify order of components in the layout will affect the functionality. :)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions