fixed weird flashing glitch

Author: igorho2000

.firebase/hosting.YnVpbGQ.cache

@@ -103,7 +103,6 @@ blog/0-6.jpg,1657300022773,9f8ecca3669c51c5db20357af35cd315874f5ca81adf69fe2ad16
 blog/0-banner.JPG,1656536019991,36a6c576760a2504170b419c84ea291ebd87f02e1e103ce07d23f7a3c721c70b
 blog/1-banner.png,1656537053921,afeb1e38d66daacdedfe2257dabb101dbdc6a1578fc3f4cf601c70f4b5b189ed
 blog/2-banner.jpg,1656536309914,3fd4071bd0cff346b50e83d70d9566dbe6a5131b98c779f67c76790efaafed7e
-icons/icon-back.svg,1661049059795,306cb652abfe31926b38847be584a0a69e75666ed2e5174e6524a9fad6be0e37
 navigation/nav-about-ch.svg,1682011641749,3455eb6e0d575fa98404a5cf54fa94016a2c8be0cf10a5cda8fe2285e305840c
 navigation/nav-about.svg,1661317177083,b170924da6cde457c17aeaea8df4c5cefbbe4b8b22af8bd4e4e122b12df75d18
 navigation/nav-blog-ch.svg,1682012107691,fd4dee879f5737e3819c89422164bfb9ef17066165fff141e351861335c6a957
@@ -146,19 +145,22 @@ portfolio/pm-3.png,1668067224977,ffe6fa38a1e54763a99043a21d2c330600a3b5e2105bef5
 portfolio/pm-banner.png,1668067501788,8c208e8691179b9ad43b4fbfa9e7674593189675198929ee9ee9cefd23c0e0fd
 portfolio/pm_case.pdf,1667802192923,3b63f9f9ab88612ee25f8ee0fa52df27d9cd2da42859e04c81a34b5e01d3070c
 portfolio/S__8134660.jpg,1668601073780,816652d2838b04da87f018a5ccb85da58c2a2cc0fbed275b64f6c5be4cdaddd2
-sidebar/icon-download-black.svg,1661049673701,34160589acae57e6379d3d71f69dd8291bb031311ea8068ee0fffbe5a363b4c3
-sidebar/icon-download-white.svg,1661060800796,bbda3888bc0a58f462ed38a7425616809d5b44c99f84d1b00f2269d48acfbd7f
 sidebar/icon-email.svg,1661049572371,c1a6cebb819d73d9d6b77dafae97f532d62518af46ef0b79de1c49156576edd5
 sidebar/icon-fiverr.svg,1666014831421,6f3ece5e8e7d0e577bbd63281c7ce5fcc2f55706885c16013778cce2adb751c6
 sidebar/icon-github.svg,1661049532620,e2922f94288f7fffb0aa4d6b47f38a991a983e2fab53250ce323d2619e20dddd
 sidebar/icon-linkedin.svg,1661049600193,8264bf409668d4e47ace09810d6c09da533ced8056b89694381a140340591919
 sidebar/Igor_Resume_Eng.pdf,1668568735422,61348f9bb5d962e4c229b97d3e690f4bff499699a9fde352a077b2660ba5cdf2
-asset-manifest.json,1682064156636,71a4fc0e1a9b5cc2f51b63272b648812f2a0c47a024dca5ea5aeba4ad5b8ed9f
-index.html,1682064156636,eabebf4809e8779e4c6b8e05f67d36a7caa42463ddd21575b5a149d3eb3f3667
-static/js/787.468f20b0.chunk.js,1682064156640,0b00cb067b57c48ff4968bdb5a2e70bc8c25477d0af64b1602b458786c9c71c0
-static/css/main.b183410e.css,1682064156641,d9d27f178c3742d230282dc2f7b9581867f494bf7af0280c9228b15bd604adfc
-static/js/main.f415bab7.js.LICENSE.txt,1682064156640,c47c3807c0744968abc5b558d7cf9dee8f9cc7a5f39c10f9655eab6d3bc96f46
-static/js/787.468f20b0.chunk.js.map,1682064156641,0d4f07246d8d5916b33cfc6349781465eb354ace4ce1cb990e3faa058d9ccec6
-static/css/main.b183410e.css.map,1682064156641,322af3d60c7fd1691e90435a0bd36f1f81acf566561cc3454e8401e3ecc3d459
-static/js/main.f415bab7.js,1682064156641,27478937e306118dfb37f182a06182c3b797020359b4346c670754cb2d563e11
-static/js/main.f415bab7.js.map,1682064156641,4fda6cfedda5668fc34be3062a32d82e298c004f564eecc9439db9bc1aab337f
+asset-manifest.json,1682223730698,0270b6f7275a0b4cadd4242a7ea60cadcb065887f6bc4782db66c45958ce39d6
+index.html,1682223730698,2ad3587e7c9365cf63c1b4efb97a711050ecdfc6b44ccda5c7d46e3a2da1eb9f
+logo-main-dark.svg,1682097474050,3310ceb2406ce7e52d990d7cf5fd9f6d2883fa975c1daa8cb96b39848c894d7f
+transition-sled-dark.svg,1682098196202,c4853f3e8f7907fb40e716fdd7745e81791f22f12383404007cf0b75095b9712
+static/css/main.b9a36114.css,1682223730708,4aad5f223feb3b650bf489ae674f70d9601c2d7c98f497882b7e567dc2448cda
+static/js/787.3f6603c5.chunk.js,1682223730708,44f90dbb2141d9880e27a86ee98d893d905344f5f3534cf2e7376d81b3c522ee
+static/js/787.3f6603c5.chunk.js.map,1682223730708,1218660ac15448b031d383608b2c18f04805cd2d16d1739f07d53ef2a256e6fb
+static/js/main.97b7ba7d.js.LICENSE.txt,1682223730708,c47c3807c0744968abc5b558d7cf9dee8f9cc7a5f39c10f9655eab6d3bc96f46
+static/css/main.b9a36114.css.map,1682223730708,fd1a1520487674627b6fbdf9717bd7b9efd97cec1a0592d2d521430abaff2d3c
+sidebar/icon-github-dark.svg,1682098563634,421dd8dfdba6d59f72725d50bbd81e72a1a1d5a4ff0a5ea79c3421b3f1a53bb1
+sidebar/icon-email-dark.svg,1682098569773,45cf2f37194fa05c97f7f463e83d25608df7f15bdb121cd9772f1933e48de58d
+sidebar/icon-linkedin-dark.svg,1682098555530,01bcab3528906389340904a463b4254cac43cbf8b462babdc194d7894173063f
+static/js/main.97b7ba7d.js,1682223730708,03b33f60cf9c2703865498cd33f6ab10c149e72b76ba1d7a9a709b0515f251e3
+static/js/main.97b7ba7d.js.map,1682223730710,7d5f147c6897935e013b8f0d509454ab72dc93819e356b8d323c7997941002fe

package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-one-premium",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "private": true,
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.5",

src/App.js

@@ -18,6 +18,8 @@ import {
   selectLangEn,
   toggleDarkmode,
   toggleLanguage,
+  selectLoad,
+  finishLoad,
 } from "./store/utilSlice";
 
 // Component Imports
@@ -31,6 +33,7 @@ import AnimationEndScreen from "./components/AnimationEndScreen";
 import Posts from "./pages/Posts";
 import PortPost from "./pages/Portpost";
 import Certificate from "./pages/Certificate";
+import Load from "./components/Load";
 
 // Data Imports
 import { PortList } from "./static/portfolio/portfolioPosts";
@@ -54,6 +57,7 @@ function App() {
   const langEn = useSelector(selectLangEn);
   const darkmode = useSelector(selectDarkmode);
   const animation = useSelector(selectAnimation);
+  const load = useSelector(selectLoad);
 
   useEffect(() => {
     const lang = localStorage.getItem("lang");
@@ -71,6 +75,9 @@ function App() {
     } else {
       dispatch(defineDarkmode(false));
     }
+    setTimeout(() => {
+      dispatch(finishLoad());
+    }, 1000);
   }, []);
 
   const Blogpaths = BlogList.map((item, index) => (
@@ -132,16 +139,20 @@ function App() {
         )}
       </div>
       <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/navigation" element={<Navigation />} />
-        <Route path="/about" element={<About />} />
-        <Route path="/portfolio" element={<Portfolio />} />
-        <Route path="/blog" element={<Blog />} />
-        <Route path="/certificate" element={<Certificate />} />
-        {Blogpaths}
-        {Portpaths}
+        {!load && (
+          <>
+            <Route path="/" element={!animation.inProgress && <Home />} />
+            <Route path="/navigation" element={<Navigation />} />
+            <Route path="/about" element={<About />} />
+            <Route path="/portfolio" element={<Portfolio />} />
+            <Route path="/blog" element={<Blog />} />
+            <Route path="/certificate" element={<Certificate />} />
+            {Blogpaths}
+            {Portpaths}
+          </>
+        )}
       </Routes>
-
+      <Load inProgress={load} />
       <Transition inProgress={animation.inProgress} />
       <AnimationEndScreen inProgress={animation.endAnimation} />
     </>

src/components/Load.js

@@ -0,0 +1,12 @@
+export default function Load(props) {
+  return (
+    <div
+      className={`tr-background load`}
+      style={{ display: props.inProgress ? "block" : "none" }}
+    >
+      <div className="tr-cont">
+        <img className="load-img" src="../logo-o-2d.svg" alt="load" />
+      </div>
+    </div>
+  );
+}

src/static/css/Transition.css

@@ -37,6 +37,14 @@
     opacity: 0;
   }
 }
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 
 .tr-background {
   width: 100vw;
@@ -47,6 +55,7 @@
   animation-name: fade;
   animation-duration: 2s;
   animation-delay: 1.7s;
+  animation-fill-mode: forwards;
   z-index: 1000;
 }
 
@@ -83,6 +92,13 @@
   animation-name: extend;
   animation-duration: 1.8s;
 }
+.load {
+  animation-delay: 0.8s;
+}
+.load-img {
+  width: 4rem;
+  animation: spin 0.3s linear 0s infinite;
+}
 
 @media (orientation: landscape) {
   .tr-img {
@@ -162,6 +178,7 @@
   top: 0;
   background-color: black;
   animation-name: end;
+  animation-fill-mode: forwards;
   animation-duration: 3s;
   opacity: 0;
 }
@@ -178,6 +195,7 @@
     rgb(91, 212, 255) 100%
   );
   animation-name: endfade;
+  animation-fill-mode: forwards;
   animation-duration: 1s;
   animation-delay: 3s;
 }

src/store/utilSlice.js

@@ -1,6 +1,7 @@
 import { createSlice } from "@reduxjs/toolkit";
 
 const initialState = {
+  load: true,
   animation: {
     inProgress: false,
     endAnimation: false,
@@ -35,6 +36,9 @@ export const utilSlice = createSlice({
     defineDarkmode: (state, action) => {
       state.darkmode = action.payload;
     },
+    finishLoad: (state) => {
+      state.load = false;
+    },
   },
 });
 
@@ -45,8 +49,10 @@ export const {
   defineLanguage,
   toggleDarkmode,
   defineDarkmode,
+  finishLoad,
 } = utilSlice.actions;
 
+export const selectLoad = (state) => state.util.load;
 export const selectAnimation = (state) => state.util.animation;
 export const selectDarkmode = (state) => state.util.darkmode;
 export const selectLangEn = (state) => state.util.langEn;