fix : need to fix component flicker Issue in SVG Icons about dobyming.github.io HOT 5 CLOSED

I found good article that explains why this effect happens. related Post - why font-awesome-icon flicker

Cause

Instead, they are downloaded through a separate network request and then inserted into the document using Javascript. It’s essentially DOM manipulation, which is how React (which underlies Gatsby) works. Only this time, instead of manipulating UI elements like <div>, it is inserting a <style> element. Essentially, the styles are downloaded externally and inserted into the document through DOM manipulation.

Fix

To fix this, we simply need the style rules to be “truly inline” — that is, they should be bundled with the original HTML document such that they are already active on render.

I'm gonna Ref this PR and try to solve the issue,, In Gatsby How to set SVG Icon Config settings
https://www.osiux.ws/blog/get-rid-of-huge-font-awesome-icons-on-gatsby

from dobyming.github.io.

Handle FontAwesome Icon Flicker Issue by adding this code in gatsby-browser.js

import 'prismjs/themes/prism-tomorrow.css';
// added Code
import '@fortawesome/fontawesome-svg-core/styles.css'
import { config } from '@fortawesome/fontawesome-svg-core'

config.autoAddCss = false;

Result

from dobyming.github.io.

By adding gatsby-plugin-offline, It stores static assets in Service worker. so when User Reload the page, it refer assets that stores in cache, so the flickering effects shrinks than previous version I released.

[Ref]
https://www.freecodecamp.org/news/how-to-enable-offline-mode-for-gatsby-site/
https://developer.chrome.com/docs/workbox/service-worker-overview/

from dobyming.github.io.

I Deployed it, and it quite works well. Here's the Result that I tested in deployed version.

Result

Toggle to Dark Mode, and works well.

Closing this Issue

from dobyming.github.io.

23.05.28

After I merged and deployed this #19, I got 400 Points in LightHouse.😊

from dobyming.github.io.