Implementing transition:persist in astro spa

[ruby basin]

hi, i have a catalog page that fetches data from a server and parses it, it works. however when i am using view transitions, the data gets broken and doesnt show anything after i navigate to another page and come back to the catalog page

    <div class="flex justify-center items-center h-full mt-6">
        <FilterMenu client:load>
            <ul slot="type" id="typeList" class="pt-2 text-xl"></ul>
        </FilterMenu>
        <label for="searchInput"></label>
        <div class="relative flex items-center sm:w-96 w-64 ml-3">
            <Icon pack="mdi" name="magnify"
                  class="w-5 h-5 absolute left-[0.7rem] top-[1.2rem] transform -translate-y-1/2 text-gray-400"/>
            <input class="w-full rounded-lg border bg-white px-4 py-2 pl-9 text-sm text-black placeholder:text-neutral-500 border-neutral-300"
                   type="text" id="searchInput" placeholder="Search">
        </div>
    </div>
    <div class="sm:flex max-w-4xl mx-auto pt-6" transition:persist>
// ive added transition:persist but it gets marked as red in webstorm and im not sure if it is working properly
        <div id="productList" class="grid sm:grid-cols-3 grid-cols-2 gap-3 sm:mx-6 mx-4 mb-12 sm:mb-0"></div>
    </div>

// underneath this is the script code which fetches json from a server and parses it

how can i implement transition:persist?

[dry relic]

Hi @ruby basin. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The transition:persist directive in Astro allows you to maintain the state of components and HTML elements across page navigations. This means that instead of replacing them when navigating to a new page, these elements will be persisted.

To use transition:persist, you need to add it to the element you want to persist. For example, if you want to keep a video playing across page navigation, you would add transition:persist to the video element like so:

<video controls="" autoplay="" transition:persist>
 <source
 src="<https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4">
 type="video/mp4"
 />
</video>

This <video> element, with its current state, will be moved over to the next page (if the video also exists on that page) source (https://astro.build/blog/astro-2100/).

In your case, you've added transition:persist to a <div> element. If this element exists on the next page, the element from the old page with its current state will continue to be displayed, instead of replacing it with the element from the new page.

However, it's important to note that transition:persist works with Astro islands (a UI framework component with a client: directive). If your component is not an Astro island, you might face issues. Also, the component needs to exist on the next page for the state to be persisted.

If you're still facing issues, it might be due to a bug or a specific use-case not covered by the current implementation of transition:persist. There are open issues on Astro's GitHub discussing similar problems, like this one (https://github.com/withastro/astro/issues/8601) and this one (https://github.com/withastro/astro/issues/8781). You might find some insights there, or you could open a new issue describing your problem in detail.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: