Route transition "stuck"

Questions
1

Hi!

When transitioning to different pages, there is a case where the transition css does not get removed. It gets “stuck”. And the css is there the whole time, leaving also a blank space.

Is there a fix to that?

This is how I am routing (done the same way in every page).

f7.views.main.router.navigate(LOGIN);

Any help appreciated!

update1: still does not work. But I realized that if I set time out, and wait for about 500 milliseconds, and then execute the code, then it works fine. Which means, that for some reason, if I execute the code immediately, it does not work fine, animation’s css gets stuck and stays in running. Though this is a temporary fix, since it does not really solve the issue.

2

It means you execute this code in some wrong place

3 
async function getUserData() {

    f7.dialog.preloader("Checking...");

    let response;

    let userName;

    try {

      response = await api.user_home.home();

      userName = await api.auth.getUserData();

      if (response.data.result === "error") {

        console.log("Error while getting payment information from api");

        f7.dialog.close();

        f7.views.main.router.navigate(LOGIN);

      } else {

        setNextPayAmount(response.data.nextPay.amount);

        setNextPayDate(response.data.nextPay.dueDate);

        setDocsCount(response.data.docs);

      }

      if (userName.data.result === "error") {

        console.log("Error while getting username from api");

      } else {

        setUsername(userName.data.username);

        setFullName(userName.data.fullname);

      }

      f7.dialog.close();

    } catch ({ response, username }) {

      f7.views.main.router.navigate(LOGIN);

    }

    f7.dialog.close();

    if (props.message) {

      f7.dialog.alert(props.message);

    }

  }
4

And where is this function?

5 
function userHomePage(props) {

  const [username, setUsername] = useState("");

  const [fullname, setFullName] = useState("");

....

  async function getUserData() {

   ....

  }

  useEffect(() => {

    getUserData();

  }, []);

  return (

    <Page name="user-homepage" className="homepage page-gradient">

      <TenantNavBar slot="fixed" home="true" />

      <Block>

        {/* Greeting Block */}

        <div>

          <h1 className="center-elements greeting-font greeting-color">

            Hello {fullname}

          </h1>

        </div>

      </Block>

      <Block>

        {/* Next payment information Block */}

       .....

      </Block>

    </Page>

  );

}
6

Ok, it can not be called on component creation as routing already in process. Better place for it is you use route’s beforeEnter/Leave for this https://framework7.io/docs/routes.html#route-before-enter-leave