Detecting a live slice preview?

Developing with Prismic
1

Hi all, I'm wondering if there is a way of detecting a live slice preview?

I am creating a website, built using nuxt3, The website has a preloader animation on first load. Ideally I would not see this animation in the slice preview in the prismic backend, however it runs when the slice is loading. Any clues or tips as to how to detect the slice loading into the prismic editor? Currently the preloader it is mounted in the app.vue

Here's a screen grab so you can see what I mean: http://grfk.co.nz/v/ocaziH

4

Hi @grafik,

We had an older example on NextJs regarding this. Since the simulator page is just a regular page, you should be able to query data on it like usual and then wrap the simulator component with a react context provider or pass data to your slice zone using its context prop.

Here, you can pass an isSimulator on the slice zone's context prop and it'll get provided to each of your slices. You can check for that and cancel out of the animation, similar to how you're probably doing for prefersReducedMotion already.

I hope that helps :slight_smile:

5

Great thanks, will give that a go

1 Like