Conditional root rendering

[kwameopareasiedu]

I have this component which is supposed to show a loader while it checks the auth state and then, if authenticated, show the child.

export function AuthGuard(child: HTMLElement) {
  const authenticating = van.state(true);
  const authenticated = van.state(false);

  auth.onAuthStateChanged((user) => {
    if (user) {
      authenticated.val = true;
    } else navigate(LOGIN_ROUTE);

    authenticating.val = false;
  });

  if (authenticating.val || !authenticated.val) {
    return div(
      { className: "w-full h-full grid place-items-center" },
      Text({ align: "center" }, "Authenticating. Please wait...")
    );
  } else return child;
}

The issue I run into is the tab freezes and from Chrome's tab manager, it just consumes memory at an exponential rate. I'm guessing using the authenticated.val in the function's body (and not in a derive or the content) causes an infinte binding.

How do I resolve this?

[Tao-VanJS]

I don't have a good idea about what's going wrong in your code. I don't think purely accessing the val property of a State object would cause an infinity loop. I suspect there could be other parts of the code that cause the infinity loop. I would suggest that you can start with some profiling tool (e.g.: https://developer.chrome.com/docs/devtools/memory-problems/allocation-profiler) to see what's going wrong in the web page.

[kwameopareasiedu]

@Tao-VanJS From the profile, and some logging, I think that's what's happening. The profiler shows an unending series of the calls setVal -> derive -> runAndCaptureDeps

[kwameopareasiedu]

However, if I move the state and Firebase auth callback outside the component, it works as expected.

AuthGuard

const authenticating = van.state(true);
const authenticated = van.state(false);

auth.onAuthStateChanged((user) => {
  console.log(user)
  if (user) authenticated.val = true;
  else navigate(LOGIN_ROUTE);
  authenticating.val = false;
});

export function AuthGuard(child: HTMLElement) {
  if (authenticating.val || !authenticated.val) {
    return div(
      { className: "w-full h-full grid place-items-center" },
      Text({ align: "center" }, "Authenticating. Please wait...")
    );
  } else return child;
}

App

export default function App() {
  return Router({
    className: "w-screen h-screen",
    routes: [
      { path: HOME_ROUTE, component: () => AuthGuard(HomePage()) },
      { path: LOGIN_ROUTE, component: LoginPage },
      { path: SIGNUP_ROUTE, component: SignupPage }
    ]
  });
}

Currently using version 1.2.7 of vanjs-core

[sirenkovladd]

Can you try

export function AuthGuard(child: HTMLElement) {
  const authenticating = van.state(true);
  const authenticated = van.state(false);

  auth.onAuthStateChanged((user) => {
    if (user) {
      authenticated.val = true;
    } else navigate(LOGIN_ROUTE);

    authenticating.val = false;
  });
  
  return () => {
    if (authenticating.val || !authenticated.val) {
      return div(
        { className: "w-full h-full grid place-items-center" },
        Text({ align: "center" }, "Authenticating. Please wait...")
      );
    } else return child;
  }
}

export default function App() {
  return Router({
    className: "w-screen h-screen",
    routes: [
      { path: HOME_ROUTE, component: AuthGuard(HomePage()) },
      { path: LOGIN_ROUTE, component: LoginPage },
      { path: SIGNUP_ROUTE, component: SignupPage }
    ]
  });
}

[kwameopareasiedu]

Unfortunately, this doesn't work since this calls the AuthGuard function instead of passing it as the component function to the router...

[sirenkovladd]

https://jsfiddle.net/Sirenko/jv29wexf/55/

Here's an example, + fixed a bug with the garbage collector for the HomePage (if there was reactivity on it, it would not work correctly after switching)