Page transitions

Ask us anything How do I?
1

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.

image
image1709×821 4.26 KB

4 Likes
2

@Joyce I’m also interested in this

3

Hi both :wave:

You can do add a loader during page transitions here:

CleanShot 2023-06-12 at 12.13.06@2x
CleanShot 2023-06-12 at 12.13.06@2x3396×1696 350 KB

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
4

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?

5

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="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets3.lottiefiles.com/packages/lf20_57wiJlsbmr.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop  autoplay></lottie-player>

If only it was that simple :slight_smile:

7

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:

8

Hi @MichaelLovell :wave:

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

2 Likes
9

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

10

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:
 <style>
.skeleton-loader {
  background-color: #3f3f4680 50%; /* Updated to the primary color */
  background-image: linear-gradient(
    90deg,
    #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%;  }} 
</style>
4 Likes