Merge pull request #771 from supertokens/fix/flicker

fix: guides page images rendering issue

Author: rishabhpoddar

v2/src/components/recipeBoxes/add_ons.tsx

@@ -1,16 +1,12 @@
-import React, {useState, useEffect} from "react";
+import React, { useState } from "react";
 import "./recipeBox.css"
 
-type size = "small" | "large"
 
 export default function Addons(props: { text: string, path: string, icon: string, img?: string }) {
-    const [image, setImage] = useState({default: ""});
-    const [imageOnHover, setImageOnHover] = useState({default: ""});
     const [hover, setHover] = useState(false);
-    useEffect(() => {
-        setImage(require(`../../../static/img/guides/${props.icon}.svg`));
-        setImageOnHover(require(`../../../static/img/guides/${props.icon}-orange.svg`));
-    },);
+    
+    const regularIconPath = `/img/guides/${props.icon}.svg`;
+    const onHoverIconPath = `/img/guides/${props.icon}-orange.svg`;
 
     const handleMouseOver = () => {
         setHover(true);
@@ -21,7 +17,7 @@ export default function Addons(props: { text: string, path: string, icon: string
 
     return <a href={props.path} className={`recipe_box`} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
         <div className="recipe_box__icon_wrapper">
-            <img src={hover ? imageOnHover.default : image.default} alt={props.text} />
+            <img src={hover ? onHoverIconPath : regularIconPath} alt={props.text} />
         </div>
         <div className="recipe_box__text">{props.text}</div>
     </a>

v2/src/components/recipeBoxes/authMode.tsx

@@ -1,20 +1,13 @@
-import React, {useState, useEffect} from "react";
+import React, {useState } from "react";
 import "./recipeBox.css"
 
-type size = "small" | "large"
+type Size = "small" | "large"
 
-export default function AuthMode(props: { text: string, size: size, path: string, icon: string, img?: string }) {
-    const [image, setImage] = useState({default: ""});
-    const [imageOnHover, setImageOnHover] = useState({default: ""});
-    const [imageToShow, setImageToShow] = useState({default: ""});
+export default function AuthMode(props: { text: string, size: Size, path: string, icon: string, img?: string }) {
     const [hover, setHover] = useState(false);
-    useEffect(() => {
-        setImage(require(`../../../static/img/guides/${props.icon}.svg`));
-        setImageOnHover(require(`../../../static/img/guides/${props.icon}-orange.svg`));
-        if(props.size == "large" && props.img) {
-            setImageToShow(require(`../../../static/img/guides/${props.img}.png`))
-        }
-    }, [props.size]);
+    
+    const regularIconPath = `/img/guides/${props.icon}.svg`;
+    const onHoverIconPath = `/img/guides/${props.icon}-orange.svg`;
 
     const handleMouseOver = () => {
         setHover(true);
@@ -25,7 +18,7 @@ export default function AuthMode(props: { text: string, size: size, path: string
 
     return <a href={props.path} className={`recipe_box ${props.size}`} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
         <div className="recipe_box__icon_wrapper">
-            <img src={hover ? imageOnHover.default : image.default} alt={props.text} />
+            <img src={hover ? onHoverIconPath : regularIconPath} alt={props.text} />
         </div>
         <div className="recipe_box__text">{props.text}</div>
         <div className="recipe_box__full_image">

v2/src/components/recipeBoxes/refs.tsx

@@ -1,27 +1,23 @@
-import React, {useState, useEffect} from "react";
+import React, { useState } from "react";
 import "./recipeBox.css"
 
-type size = "small" | "large"
-
 export default function Refs(props: { text: string, path: string, icon: string, img?: string }) {
-    const [image, setImage] = useState({default: ""});
-    const [imageOnHover, setImageOnHover] = useState({default: ""});
     const [hover, setHover] = useState(false);
-    useEffect(() => {
-        setImage(require(`../../../static/img/guides/${props.icon}.svg`));
-        setImageOnHover(require(`../../../static/img/guides/${props.icon}-orange.svg`));
-    },);
+
+    const regularIconPath = `/img/guides/${props.icon}.svg`;
+    const onHoverIconPath = `/img/guides/${props.icon}-orange.svg`;
 
     const handleMouseOver = () => {
         setHover(true);
     }
+
     const handleMouseOut = () => {
         setHover(false);
     }
 
     return <a href={props.path} className={`recipe_box`} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
         <div className="recipe_box__icon_wrapper">
-            <img src={hover ? imageOnHover.default : image.default} alt={props.text} />
+            <img src={hover ? onHoverIconPath : regularIconPath} alt={props.text} />
         </div>
         <div className="recipe_box__text">{props.text}</div>
     </a>