The function loadPagesElement inside frontend/src/router/index.tsx has the following line of code:
const pagesModule = await import('../components/pages')
This function is used for almost every page, so every time almost any page (e.g. the Time Unit table) is opened, the pages.tsx file is imported, and that file imports every other Table and Detail page at the same time. This means that the first time a page is opened, the browser freezes for >10 seconds since it has to load a lot of files. Previously the page imports were done normally at the start of index.tsx, so everything was loaded once the app was started, which was better since it at least didn't freeze the page once the user attempts to navigate anywhere.
I'm not sure how this should be improved, but one option might be to break up the pages.tsx file into different files, or change the way the Browser Router works in index.tsx. I think the best way to go about this is to split up pages.tsx so that each page has its own file, then lazy() can be used inside index.tsx to easily load these pages lazily (only after the user requests them by navigating to that spesific page)
The function
loadPagesElementinsidefrontend/src/router/index.tsxhas the following line of code:const pagesModule = await import('../components/pages')This function is used for almost every page, so every time almost any page (e.g. the Time Unit table) is opened, the
pages.tsxfile is imported, and that file imports every other Table and Detail page at the same time. This means that the first time a page is opened, the browser freezes for >10 seconds since it has to load a lot of files. Previously the page imports were done normally at the start ofindex.tsx, so everything was loaded once the app was started, which was better since it at least didn't freeze the page once the user attempts to navigate anywhere.I'm not sure how this should be improved, but one option might be to break up the
pages.tsxfile into different files, or change the way the Browser Router works inindex.tsx. I think the best way to go about this is to split uppages.tsxso that each page has its own file, then lazy() can be used insideindex.tsxto easily load these pages lazily (only after the user requests them by navigating to that spesific page)