Andras/BoundlessFlowCampus2K

Fork 0

#654-flashes-on-refresh #759

Merged

a22erigr merged 10 commits from #654-flashes-on-refresh into team_2_week_4

2026-05-06 07:43:30 +00:00

b24idalu commented

2026-05-05 13:53:41 +00:00

Collaborator

Regarding issue #654: flashes on refresh.

Problems: 1. A flash happens when reloading the page, the browser paints the page before CSS/js are fully applied/run.

Solution: 1. The flash happens when rendering is not done fast enough, Chromium (Chrome/Edge) paints faster than firefox, therefore it is not noticeable there. There is not a whole lot one can do about this since even professionals have this problem. What they do is they create a skeleton and set rules for performance, among other things. I have created a skeleton for the basic layout of all pages (navbar, footer and a content placeholder) so that they load immediately and shows something on the page that is not a white background. Also compressed some of the icons to improve performance.

Possible improvements:

Add different content placeholders for the different pages
Since a lot of code is copied from previously made content, one could move some of those to the public folder (for example css files) and therefore not have double files. Unsure what is better for the layout.

Notes:

When loading the image it sometimes show a text before becoming the actual image, tried fixing with preloading but does not always work.

Regarding issue [#654](https://git.webug.se/Andras/BoundlessFlowCampus2K/issues/654): flashes on refresh. Problems: 1. A flash happens when reloading the page, the browser paints the page before CSS/js are fully applied/run. Solution: 1. The flash happens when rendering is not done fast enough, Chromium (Chrome/Edge) paints faster than firefox, therefore it is not noticeable there. There is not a whole lot one can do about this since even professionals have this problem. What they do is they create a skeleton and set rules for performance, among other things. I have created a skeleton for the basic layout of all pages (navbar, footer and a content placeholder) so that they load immediately and shows something on the page that is not a white background. Also compressed some of the icons to improve performance. Possible improvements: - Add different content placeholders for the different pages - Since a lot of code is copied from previously made content, one could move some of those to the public folder (for example css files) and therefore not have double files. Unsure what is better for the layout. Notes: - When loading the image it sometimes show a text before becoming the actual image, tried fixing with preloading but does not always work.

b24idalu added 9 commits

2026-05-05 13:53:42 +00:00

Fixed correct reference to theme.css 6b094d6117

Fixed correct reference to theme.css, it had been moved without the reference being updated. Also rearranged imports to make it clearer what stuff is imported.

Optimized png sizes 4f268a27e8

Optimized png sizes through online tools. Went from 500kb to 26kb

Optimized ico c175a838a4

Optimized ico, went from 600kb to 15kb

Added lazy loading to webpages 1e3aef436e

Added lazy loading to webpages.

Removed loading 965291a5d3

Tested loading on both sites and on imports in dashboard, didnt change loading speed too noticeable, around 40kb at most.

Created a navbar skeleton 232bb62240

Created a navbar skeleton for slow loading. Moved some of the pictures to public, and fixed the img urls to show the new path.

Added footer skeleton 7c92094569

Added footer skeleton and removed blueprint code from theme.css.

Added light/dark mode 05d2a7e126

Added light/dark mode

Added preloading on images eed1ea3340

Added preloading on images since it took too long to load sometimes (showed their alt text for a split second). Does not always work, but fixes some of the loading issues.

b24idalu self-assigned this

2026-05-05 13:53:58 +00:00

b24idalu added the

needs review

label

2026-05-05 13:54:13 +00:00

c24danli requested review from b23albst

2026-05-06 06:27:38 +00:00

b23albst requested changes

2026-05-06 07:22:56 +00:00

Dismissed

b23albst left a comment

Collaborator

Review on #759

Whats done

I Reviewed the code that's been added and tested the application

Tested on ubuntu using firefox

App starts
- The issue with the page flashing is completely fixed for me. You can still see a brief moment of the page not being loaded, but at least it is in the right mode, so the flash is not as noticeable and unpleasant.
- Sometimes, the images do not load at all for me, but only when starting the app through "npm start". When viewing the app normaly, this does not occur. As you stated, I get the quick flash of text where the images are, but I think this is 10x better than the whole page flashing.

frontend/public/index.css
- Indentation/code styling is ok
- Naming convention
  - As we were to be more strict with naming, some of the selector names are not separated with hyphens.
- Comments ok
- General code quality ok
The rest of the files
- Identation/code styling is ok
- Followes naming convention
- Comments are ok
- General code quality is ok

What needs to be done

frontend/public/index.css
- Selector names need to be fixed (hyphens instead of camel case)

Conclusion

A majority of the code looks good. I think it is a big improvement, since the flash is not nearly as noticeable. As we are to be more strict with naming, some of the css selector names have to be changed before it can be merged

# Review on #759 ## Whats done I Reviewed the code that's been added and tested the application ### Tested on ubuntu using firefox + App starts + The issue with the page flashing is completely fixed for me. You can still see a brief moment of the page not being loaded, but at least it is in the right mode, so the flash is not as noticeable and unpleasant. + Sometimes, the images do not load at all for me, but only when starting the app through "npm start". When viewing the app normaly, this does not occur. As you stated, I get the quick flash of text where the images are, but I think this is 10x better than the whole page flashing. ### Inspected following files frontend/public/index.css, frontend/public/index.html, frontend/src/app/App.js, frontend/src/components/Navbar/Navbar.js, frontend/src/pages/dashboard/Dashboard.js + frontend/public/index.css + Indentation/code styling is ok + Naming convention + As we were to be more strict with naming, some of the selector names are not separated with hyphens. + Comments ok + General code quality ok + The rest of the files + Identation/code styling is ok + Followes naming convention + Comments are ok + General code quality is ok ## What needs to be done + frontend/public/index.css + Selector names need to be fixed (hyphens instead of camel case) ## Conclusion + A majority of the code looks good. I think it is a big improvement, since the flash is not nearly as noticeable. As we are to be more strict with naming, some of the css selector names have to be changed before it can be merged

b24idalu added 1 commit

2026-05-06 07:37:05 +00:00

Removed camelcase and added hyphens ada33f6ab5