Render Location

[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. :)

[diecodev]

I am currently maintaining the repo, however, there are many fixes that require the new version of qwik, I can only say give me some time to be able to fix this bug, because I currently have to perform at work, in qwik-ui, in this repo and in other side projects. I will be trying to solve this problem with an inline component. Gonna expend the next 2 days in this bug and let you know if I found some way to fix it.

Btw, thank you for the issue.

[diecodev]

@catlincox it's me again, can you pls share me link with a reproduction example? I understand the main reason os this issue but, I do not understand this part:

"The below code works just fine as long as there is not page refresh that isn't towards the top of the layout."

[catlincox]

Yes, unfortunately I can't share the repository, because of being part of the company repository. I would have to add you as a user, and I don't want to pay for the :). However, though addressing your question. If the Toaster component is at the top of the layout.tsx file then everything works fine. When the Toaster component is at the bottom of the layout.tsx is when the issue occurs. I think this is just based on it not being in view when the initial screen loads. Like I said it might not be an issue and instead just and update in documentation to ensure that users put the container component at the top of the screen to ensure that the component is loaded to the dom.

I hope that answered the question, feel free to reach out to me personally and we can setup a zoom call or something and I will show you, but I can't just add people to the company repo :)

[diecodev]

kk, gonna update the docs and also try to improve the code to find some way to use the popover api, that way the toast is gonna be alway on top of everything in the render three until you mount something else in the top-layer

[catlincox]

Awesome, wasn't trying to be a pain, just trying to point out something that could cause issue. The library itself works great and can be customized. Thanks for the awesome work, let me know if you need anything else from me.

[diecodev]

This was solved in the latest website update, pls take a look here, also add the update to the readme.

Thanks for reporting this, tho.