[PR #1728] [MERGED] Fix FOUC on Firefox #16017

New Issue

GiteaMirror · 2025-11-02T12:00:23-06:00

GiteaMirror commented

2025-11-02 12:00:23 -06:00

📋 Pull Request Information

Original PR: https://github.com/go-gitea/gitea/pull/1728
Author: @sondr3
Created: 5/14/2017
Status: ✅ Merged
Merged: 5/31/2017
Merged by: @lunny

Base: master ← Head: fix-fouc-firefox

📝 Commits (1)

cbbcfc6 Fix FOUC on Firefox

📊 Changes

4 files changed (+17 additions, -2 deletions)

View changed files

📝 public/assets/librejs/librejs.html (+9 -0)
➕ public/js/libs/cssrelpreload.min.js (+2 -0)
➕ public/js/libs/loadCSS.min.js (+2 -0)
📝 templates/base/head.tmpl (+4 -2)

📄 Description

As mentioned in #1698 Firefox users experience a brief FOUC (flash of unstyled content) while loading various pages in Gitea, this commit should fix this by using Filament Groups loadCSS library to asynchronously load the CSS that makes the pages flash.

This commit will add ~1.5kB of JS to the <head> of the webpages. The scripts need to be in the head for the FOUC to not occur, if you do it with the scripts in the bottom of the page it will load the CSS too late and the FOUC will occur regardless. You could potentially also inline them but I went with linking to them.

You will notice in the before and after from the developer panel that the Font Awesome CSS is loaded last because it will not load until the DOM content is ready.

NOTE: In case users don't have JS enabled it will load the CSS as normal. However I'm not sure if this is required and that I could just remove the <noscript> line.

This is my first pull request to Gitea, so let me know if I need to change anything. 😃

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/go-gitea/gitea/pull/1728 **Author:** [@sondr3](https://github.com/sondr3) **Created:** 5/14/2017 **Status:** ✅ Merged **Merged:** 5/31/2017 **Merged by:** [@lunny](https://github.com/lunny) **Base:** `master` ← **Head:** `fix-fouc-firefox` --- ### 📝 Commits (1) - [`cbbcfc6`](https://github.com/go-gitea/gitea/commit/cbbcfc69c19bfe8873cdf6aa581943c666bebf79) Fix FOUC on Firefox ### 📊 Changes **4 files changed** (+17 additions, -2 deletions) <details> <summary>View changed files</summary> 📝 `public/assets/librejs/librejs.html` (+9 -0) ➕ `public/js/libs/cssrelpreload.min.js` (+2 -0) ➕ `public/js/libs/loadCSS.min.js` (+2 -0) 📝 `templates/base/head.tmpl` (+4 -2) </details> ### 📄 Description As mentioned in #1698 Firefox users experience a brief FOUC (flash of unstyled content) while loading various pages in Gitea, this commit should fix this by using Filament Groups loadCSS library to asynchronously load the CSS that makes the pages flash. This commit will add ~1.5kB of JS to the `<head>` of the webpages. The scripts need to be in the head for the FOUC to not occur, if you do it with the scripts in the bottom of the page it will load the CSS too late and the FOUC will occur regardless. You could potentially also inline them but I went with linking to them. You will notice in the before and after from the developer panel that the Font Awesome CSS is loaded last because it will not load until the DOM content is ready. <img width="1057" alt="screen shot 2017-05-14 at 19 56 08" src="https://cloud.githubusercontent.com/assets/2280539/26036523/7ab1f078-38df-11e7-9f68-11cb0ed64f3a.png"> <img width="1048" alt="screen shot 2017-05-14 at 19 56 23" src="https://cloud.githubusercontent.com/assets/2280539/26036524/7d78ef50-38df-11e7-8b97-39da4df633f9.png"> *NOTE*: In case users don't have JS enabled it will load the CSS as normal. However I'm not sure if this is required and that I could just remove the `<noscript>` line. This is my first pull request to Gitea, so let me know if I need to change anything. 😃 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2025-11-02 12:00:23 -06:00

GiteaMirror closed this issue

2025-11-02 12:00:23 -06:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#16017