Initial loading animation problem (Vaadin.Flow.loading)

Question

I am trying to change the initial loading screen of my page through Vaadin. I am experiencing a couple of problems. I tried to create initial loading animation following a forum post, but a TypeScript function doesn't work because TypeScript never enters into (window as any).Vaadin.Flow.loading function. I need this to make the animation disappear when the page loads.

I tried to create initial loading animation following this forum post. To do that I created a new index.ts (into /frontend/):

import {Flow} from '@vaadin/flow-frontend/Flow';
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);


//Code added by me
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;
  }
};

The problem with what is that TypeScript never enters into (window as any).Vaadin.Flow.loading function. I already 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 not. Checking the network I made sure that the TypeScript is properly updated and actually it is.

Does anyone have any idea how to fix this?