Append Target Page Content to Current One on Routing with Flowbite Components

[seanwu1105]

Describe the bug

I try to use Flowbite Action and Navbar components on my root and about pages. However, after adding the components, it seems that SvelteKit append the contents of the target page to the current one and then remove the old contents in a noticeable time.

Interestingly, this bug only happens after I add some Flowbite components, including Action, Navbar and Card. Some basic components, such as P and A, do not cause this issue.

Reproduction

A minimal example to reproduce this bug can be found here. The project is created according to the instruction on the official website. I can reproduce the bug on macOS and Ubuntu with Chrome and Brave browsers.

Flowbite version and System Info

System:
    OS: macOS 12.5
    CPU: (8) arm64 Apple M1
    Memory: 84.47 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.4.0 - ~/.asdf/installs/nodejs/18.4.0/bin/node
    npm: 8.12.1 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Brave Browser: 106.1.44.108
    Chrome: 106.0.5249.119
    Safari: 15.6
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.517 
    flowbite-svelte: ^0.27.8 => 0.27.8 
    svelte: ^3.44.0 => 3.52.0 
    vite: ^3.1.0 => 3.1.8

[shinokada]

@jjagielka Card, Alert, Navbar components use Frame component.
I checked it with Accordion and Listgroup that also use Frame component has the same issue.

[jjagielka]

The issue is related to lack of optional transition support in svelte. See sveltejs/svelte#6686
A solution for optional transitions is used in Frame component, but evidently it's not perfect.

[jjagielka]

Quick workaround using simple {#if transition} added to Frame component.
PR uploaded.

[shinokada]

@seanwu1105 Can you try the new version and let us know.

[seanwu1105]

@shinokada It's fixed with the latest version. Thanks!