Merge pull request #2 from chiraag918/development

DEV to PROD Deployment: Imporvements
chiraag918 · Aug 22, 2023 · fd23403 · fd23403
2 parents 8d72a09 + 14a1246
commit fd23403
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 31 deletions.
diff --git a/src/assets/images/index.js b/src/assets/images/index.js
@@ -4,6 +4,7 @@ import DownloadIcon from "./DownloadIcon.png";
 import FallbackResetIcon from "./FallbackResetIcon.png";
 import FallbackExpandIcon from "./FallbackExpandIcon.png";
 import FallbackDownloadIcon from "./FallbackDownloadIcon.png";
+import Wallpaper from "./Wallpaper.jpg";
 
 export {
 	ResetIcon,
@@ -13,3 +14,13 @@ export {
 	FallbackExpandIcon,
 	FallbackDownloadIcon,
 };
+
+export const imageSources = [
+	ResetIcon,
+	ExpandIcon,
+	DownloadIcon,
+	FallbackResetIcon,
+	FallbackExpandIcon,
+	FallbackDownloadIcon,
+	Wallpaper,
+];
diff --git a/src/components/App.js b/src/components/App.js
@@ -9,6 +9,8 @@ import {
 	initialHtmlContent,
 	initialJsContent,
 } from "../constants";
+import { imageSources } from "../assets/images";
+import ImagePreloader from "../utilities/ImagePreloader";
 
 function App() {
 	/* 
@@ -41,7 +43,7 @@ function App() {
 	const handleTopPaneAnimationEnd = () => setShowIframe(true);
 
 	return (
-		<>
+		<ImagePreloader images={imageSources}>
 			<div
 				className="container primary-container"
 				onAnimationEnd={handleTopPaneAnimationEnd}
@@ -80,7 +82,7 @@ function App() {
 					/>
 				</div>
 			)}
-		</>
+		</ImagePreloader>
 	);
 }
 

diff --git a/src/components/CircularLoader.css b/src/components/CircularLoader.css
@@ -0,0 +1,28 @@
+.loader-container{
+	display: flex;
+	width:100vw;
+	height: 100vh;
+	justify-content: center;
+	align-items: center;
+}
+
+.spin{
+ width:6vw;
+ height:6vw;
+ border-radius:50%;
+ box-shadow: 2px 2px 8px white,
+						 4px 4px 8px #fff;
+ border:10px solid #fff;
+	border-bottom:10px solid transparent;
+ border-top:10px solid transparent;
+ animation: spin 1.4s linear infinite;
+}
+
+@keyframes spin{
+ 0%{
+	 transform: rotate(0deg);
+ }
+ 100%{
+	 transform: rotate(-360deg);
+ }
+}
diff --git a/src/components/CircularLoader.js b/src/components/CircularLoader.js
@@ -0,0 +1,11 @@
+import "./CircularLoader.css";
+
+const CircularLoader = () => {
+	return (
+		<div class="loader-container">
+			<div class="spin"></div>
+		</div>
+	);
+};
+
+export default CircularLoader;
diff --git a/src/constants/index.js b/src/constants/index.js
@@ -5,7 +5,6 @@ export const initialHtmlContent = `<html>
 <body>
 	<div>RESET THE EDITORS & START CODING!!!</div>
 	<div class="spin">
-		<div class="inner"></div>
 	</div>
   <div class="note-container">
     <div class="note">To reset, click/hover on RED button on toolbar</div>
@@ -15,7 +14,7 @@ export const initialHtmlContent = `<html>
 </html> `;
 
 export const initialCssContent = `body,.spin{
-	position:relative;
+ position:relative;
  display:flex;
  justify-content:space-evenly;
  flex-direction:column;
@@ -30,8 +29,8 @@ body{
  overflow:hidden;
 }
 .spin{
- width:150px;
- height:150px;
+ width:6vw;
+ height:6vw;
  border-radius:50%;
  box-shadow: 2px 2px 8px white,
 						 4px 4px 8px #fff;
@@ -49,31 +48,6 @@ body{
 	 font-size:15px;
 	 margin-top:10px;
 }
-.inner{
- width: 120px;
- height:120px;
- border-radius: 50%;
- border: 8px solid #eee;
-	border-right:10px solid transparent;
- animation: inner 1s linear infinite;
-}
-@keyframes inner{
- 0%{
-	 transform: rotate(0deg);
- }
- 20%{
-	 transform: rotate(10deg);
- }
- 50%{
-	 transform: rotate(100deg);
- }
- 75%{
-	 transform: rotate(200deg);
- }
- 100%{
-	 transform: rotate(360deg);
- }
-}
 @keyframes spin{
  0%{
 	 transform: rotate(0deg);

diff --git a/src/index.css b/src/index.css
@@ -6,6 +6,7 @@ body {
 
 iframe{
   border: none;
+  overflow: scroll;
 }
 
 .container {

diff --git a/src/utilities/ImagePreloader.js b/src/utilities/ImagePreloader.js
@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import CircularLoader from "../components/CircularLoader";
+
+const ImagePreloader = ({ images, children }) => {
+	const [isLoading, setIsLoading] = useState(true);
+
+	useEffect(() => {
+		const imagePromises = images.map((src) => {
+			return new Promise((resolve, reject) => {
+				const img = new Image();
+				img.src = src;
+				img.onload = resolve;
+				img.onerror = reject;
+			});
+		});
+
+		Promise.all(imagePromises)
+			.then(() => {
+				setIsLoading(false);
+			})
+			.catch((error) => {
+				console.error("Error preloading images:", error);
+				setIsLoading(false);
+			});
+	}, [images]);
+
+	return isLoading ? <CircularLoader /> : children;
+};
+
+export default ImagePreloader;