Page Starts Loading

Page starts loading is great for executing requests, and redirecting the user if a certain condition is met.

Whenever you want to perform some logic as soon as possible, and you don't require the DOM to be present, you can use the Page starts loading action.

Note that Page starts loading with a conditional, and the Custom condition actions are pretty similar.

However, there is a major difference. The Custom condition action is reactive, and the Page starts loading is not.

This means that the Page starts loading action will evaluate a conditional only once, while the page is being loaded. A Custom condition on the other hand will react to a change in the condition.

Page-specific request execution

If we're getting data from our backend to populate our lesson template page, then we would want to run the request as soon as the page starts loading.

We would check if the URL is matching our lesson template page:

(c, f, i, n, r, v, e, t) => {
  return n.path === '/school/course/lesson'; //[!code focus]
};

And then we would perform our get_lesson request.

This same pattern can be used to trigger a get_user request.

Redirecting authenticated users with Page starts loading and Request finishes

It's very common to check whether the user is logged in, as soon as the page starts loading.

We can run this request on many pages, but in our case, we want to run it on the homepage of our marketing site.

That's exactly what Webflow is doing. If you're logged in, and you're trying to access webflow.com, you will be redirected to your account.

We can build this same functionality with the Page starts loading action, and a Request finishes action:

(c, f, i, n, r, v, e, t) => {
  return n.path === '/'; //[!code focus]
};

When the page starts loading, we will trigger our get_user request, which checks whether the user is logged in.

Then we can create a Request finishes action, with a Navigate to after-action.

Navigate to will handle the redirect to our app's dashboard /app/home.

The Navigate to action needs to be a conditional, and it would look like this:

(c, f, i, n, r, v, e, t) => {
  return r.get_user.ok; //[!code focus]
};

We check whether the user was successfully authenticated with r.get_user.ok.

In the video above, you can see the same functionality running on the login page.

Access control with Page starts loading and Request finishes

We can use this pattern within protected pages as well, to redirect the user to the login screen if they're not logged in.

In this case, we would check whether the URL is a protected one:

(c, f, i, n, r, v, e, t) => {
  return n.path.startsWith('/app'); //[!code focus]
};

Also, our condition in the Request finishes action would be the opposite of what we had in our previous example because we want to redirect the user to the login screen if r.get_user.ok fails:

(c, f, i, n, r, v, e, t) => {
  return !r.get_user.ok; //[!code focus]
};