[Vaadin 23] Vaadin Typescript function never entry (Vaadin.Flow.loading)

Hi, I tried to create initial loading animation following this forum: https://vaadin.com/forum/thread/18285600/how-to-implement-initial-page-loading-animation-like-on-vaadin-com
and I created new index.ts (into /fronted/) with:

import {Router} from '@vaadin/router';

const {serverSideRoutes} = new Flow({
  imports: () => import('../target/frontend/generated-flow-imports')
});

const routes = [
  ...serverSideRoutes
];

const router = new Router(document.querySelector('#outlet'));
router.setRoutes(routes);



const original = (window as any).Vaadin.Flow.loading;
(window as any).Vaadin.Flow.loading = (action: boolean) => {
  if (!action) {
    document.querySelector('#splash-screen')!.classList.add('loaded');
    (window as any).Vaadin.Flow.loading = original;
  }
};```

but typescript never enters into `(window as any).Vaadin.Flow.loading` function.

Thanks in advance <3.

Please try doing a clean / removing the target folder just to be sure that it’s not still using the auto-generated file

I tried to clean/remove the target folder but it doesn’t work, I put in the code function some console.log for debugging, those outside the function are executed but those inside no. Checking the network I made sure that the typescript is properly updated and actually it is.

Is there any news about it? I too encountered the same problem @secure-leopard

I thought about this resolution, could it be technically correct? ( @secure-leopard )

(window as any).Vaadin.Flow.loading = (action: boolean) => {
    if (!action) {
        document.querySelector('#splash-screen')!.classList.add('loaded');
    }
};

/*
 * Define const for the duration of animation
 */
const loadingStartedAt = +new Date;
const timeToLoadDom = +new Date - loadingStartedAt;
const duration = Math.max(timeToLoadDom * 3, 600) + 300;

/*
 * Create a timeout that run after animation
 */
setTimeout(() => {
    let active = (window as any).Vaadin.Flow.clients["TypeScript"].isActive(); // <- isActive from VaadinFlow that get state of loading
    (window as any).Vaadin.Flow.loading(active);
    if (active) { // <- If UI loading is not finished, create an interval that run every 100ms (1/10s) that check loading state
        let checker = setInterval(() => {
            active = (window as any).Vaadin.Flow.clients["TypeScript"].isActive();
            (window as any).Vaadin.Flow.loading(active);
            if (!active) { // <- if loading is finished, clear interval
                clearInterval(checker);
            }
        }, 100);
    }
}, duration + 500);```

@observant-numbat the first thing I’ve noticed in your example above is that you need to import the Flow in a following way with the latest Vaadin version:

import {Flow} from 'Frontend/generated/jar-resources/Flow';

Could you please try? I’ll check on my side as well, but need some time to set up the splash screen in a starter

Vaadin versions above 14 (e.g. V22 or V23) have only loadingStarted and loadingFinished API in Flow.ts, see https://github.com/vaadin/flow/blob/90e7fa9968726474a1f3f070bb48c8d1d51f9641/flow-client/src/main/frontend/Flow.ts#L130 . So I assume that the Flow.loading is not available anymore there. Need to make a working example with V23 using new API. Will be back to you later on.

There are (window as any).Vaadin.connectionState.loadingStarted and loadingFinished in the latest versions. They should be invoked, so please try replace (window as any).Vaadin.Flow.loading with these methods.

So something like this:

(window as any).Vaadin.connectionState.loadingStarted = () => {
// Show the splash screen
};

(window as any).Vaadin.connectionState.loadingFinished = () => {
document.querySelector(‘#splash-screen’)!.classList.add(‘loaded’);
};