Page transitions

Okay, scratching my head a bit here.

How can I configure a loading screen to display during page transitions?

I’ve used a loader inside a modal for other loading events, such as when a collection isFetching.

However, my attempts to display a loader when a user navigates to a different page have all failed. i.e. the loader disappears before the page actually changes. Not having a transition feels like one of those awkward moments where you’re not sure if anything is happening.

Just looking to achieve something as simple as the one in the editor. Eg.


@Joyce I’m also interested in this

Hi both :wave:

You can do add a loader during page transitions here:

Note that it won’t be a full loading screen like the one we have in the WeWeb editor. It will look like this:
CleanShot 2023-06-12 at 12.18.34

Currently you can only have this option in no-code but we’re working on other options :slight_smile:

Does that help?

1 Like

Thanks for the quick response. I’m using this that I configured in the workflow. It works, but it’s very discreet. it is possible that the user does not see. Could he be a little wider perhaps?

Thanks @Joyce

I’ve submitted a ticket as the progress bar persists as ‘blue’ despite changing the color within the editor settings.

Understanding you’re working on other options, in the interim, any advice on how I could take a low-code approach? Does it require a custom Vue component?

Naïve me looks at this and thinks… if there is already an element with property showPageLoadProgress that is being used to create this progress bar, why can’t I just slip this little bit of code in, just as I do within a html element…

<script src=""></script>
<lottie-player src=""  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop  autoplay></lottie-player>

If only it was that simple :slight_smile:

Hi @Ewerton :wave:

For now that’s the only style option we propose but I’ve forwarded your feedback to the product team as an improvement suggestion :slight_smile:

Hi @MichaelLovell :wave:

The color issue was a bug on our side. It should be fixed now :slight_smile:


Hi @MichaelLovell what did you end up doing in the end?

I took the experimental approach, but resolved to what I thought was the easiest and lightest approach.

  1. Created a full page skeleton that is a Modal element, used globally across my pages. I use this to ‘mask’ the static content on the page while/if I have some workflows running on Page Load.

  2. Created other skeletons which are just Divs nested inside the pages respective Section elements. I use these when the content loading just relates to the primary area.

Within each, I create a bunch of empty divs with rough dimensions to mimic the format of the page or section content. Each empty div just need the class eg. ‘skeleton-loader’…

  1. Added css code to the projects Custom Code, example:
.skeleton-loader {
  background-color: #3f3f4680 50%; /* Updated to the primary color */
  background-image: linear-gradient(
    #3f3f4680 8%,
    #3f3f46cf 16%,
    #3f3f46cf 24%,
    #3f3f4680 32%
  background-size: 200% 100%;
  animation: 1.5s shine linear infinite;

@keyframes shine {  to {    background-position-x: -200%;  }}