flowbite-svelte
flowbite-svelte copied to clipboard
themesberg
Card component being removed after navigated-to component is added
Describe the bug
If a Card component is on a page, PageA, and the user navigates away from that page, e.g. to PageB, PageA gets removed from the DOM after PageB is added, causing both to be visible for a brief amount of time.
Reproduction
https://stackblitz.com/edit/sveltejs-kit-template-default-t2ak1m?file=src%2Froutes%2F%2Bpage.svelte
Flowbite version and System Info
System:
OS: macOS 13.5.2
CPU: (8) arm64 Apple M2
Memory: 111.61 MB / 8.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.1.0 - ~/.nvm/versions/node/v20.1.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v20.1.0/bin/yarn
npm: 9.8.1 - ~/.nvm/versions/node/v20.1.0/bin/npm
Browsers:
Chrome: 117.0.5938.92
Edge: 117.0.2045.40
Safari: 16.6
Safari Technology Preview: 17.0
![stackblitz[bot] avatar](https://avatars.githubusercontent.com/in/182710?v=4 "Published by a pub.dev verified publisher"){kind=small}
It looks like Accordion can also cause this, actually. Just adding an empty <Accordion></Accordion> causes the flickering.
NavBrand also causes the same issue. I will test more tomorrow and update the thread.
All those components are based on the Frame which contains empty transition.
This seems like a svelte bug that is discussed already there. Seems we will need to remove transition support from Frame and leave it up to the user to added when needed. However this would not solve the problem in cases where transition is needed.
Check the #950
@jjagielka I don't fully understand the bug. I tried providing a transition (so that it is not empty) and during the transition it just appended the next page in the middle of the page.
For example, I added
<div transition:fade></div>
So is the bug related to transition specifically? It seems like whether it is empty or defined it causes the same issue.
Thanks!
https://github.com/themesberg/flowbite-svelte/assets/14283418/bb550862-78b7-40f6-9dec-68c93b2cb151
Okay, I found out that if I just add style="height:100%" in app.html it at least makes it look at alot better and it won't try to show the screen half way in the middle of the page.
My app.html looks like this now:
<html class="dark" lang="en" style="height:100%">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" class="bg-white dark:bg-gray-800 dark:text-zinc-100" style="height:100%">
<div style="display: contents; height:100%">%sveltekit.body%</div>
</body>
</html>
Can you please create a working example of that one presented in the video? Shinokada have created for you the environment for doing it just a few comments above.
Okaay, looks like the issue still exists when the page is not compeltely full. I will repro it with the link soon and update the thread.
Here is the new repro with the template that Shinokada provided: https://stackblitz.com/edit/sveltejs-kit-template-default-e9fx2l?file=src%2Froutes%2F%2Bpage.svelte
Steps to repro:
Click the first card on the home page and then click "FlowBite Svelte" top left in the nav bar and do it a few times. You'll see that it is loading the next page in the middle of the current page.
The second card is the example I pasted above with transition:fade.