l-min-components 1.0.862 → 1.0.871

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.862",
+  "version": "1.0.871",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/ImageComponent/index.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Img } from "react-image";
 import { ImageFallbackContainer } from "./index.styled";
 
@@ -19,17 +19,37 @@ const ImageComponents = ({
   alt,
   className,
 }) => {
+  const [imgSrc, setImgSrc] = useState(src);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setImgSrc(src); // Reset to primary src when the src prop changes
+    setLoading(true); // Reset loading state when src changes
+  }, [src]);
+
+  const handleError = () => {
+    setLoading(false); // Stop showing the loading placeholder
+  };
+
+  const handleLoad = () => {
+    setLoading(false); // Image has loaded successfully
+  };
   return (
-    <Img
-      className={className}
-      src={src}
-      width={width}
-      height={height}
-      alt={alt}
-      loader={
+    <>
+      {loading ? (
         <FallbackImage size={fallbackLogoSize} width={width} height={height} />
-      }
-    />
+      ) : (
+        <img
+          className={className}
+          src={imgSrc}
+          alt={alt}
+          onError={handleError}
+          onLoad={handleLoad}
+          style={{ display: loading ? "none" : "block", width, height }} // Hide the image while loading
+          {...props}
+        />
+      )}
+    </>
   );
 };
 

package/src/components/header/index.jsx

@@ -30,6 +30,7 @@ import LanguageDropdown from "./languageDropdown";
 import { getCookie } from "./getCookies";
 import { data } from "../GraphMap/data";
 import { languagesData } from "./languages";
+import loadTranslations, { preLoadWords } from "../../hooks/utils/translation";
 /**
  * @param {{
  *  type: string,
@@ -379,7 +380,7 @@ const HeaderComponent = (props) => {
     websocket2.addEventListener("message", handler, { passive: true });
 
     return () => {
-      websocket2.removeEventListener("message", handler);
+    websocket2.removeEventListener("message", handler);
       //console.log("room websocket closed");
     };
   }, []);
@@ -393,17 +394,7 @@ const HeaderComponent = (props) => {
   
   const value = JSON?.parse(localStorage.getItem("defaultLang"));
   const currentFlag = value?.flag;
-  const selectedLanguage = languagesData.find((lang) => lang?.slug === defaultLang);
-
-  useEffect(() => {
-    if (value) {
-      setDefaultLang(value?.slug);
-
-    } else if (generalData?.defaultAccount?.language) {
-      localStorage.setItem("defaultLang", JSON.stringify(selectedLanguage));
-      setDefaultLang(generalData?.defaultAccount?.language);
-    }
-  }, [generalData, defaultLang]);
+  const selectedLanguage = languagesData?.find((lang) => lang?.slug === defaultLang);
 
   // When Developer and on staging
   const isDeveloper =

package/src/components/index.js

@@ -53,3 +53,4 @@ export { default as MobileLayout } from "./mobileLayout";
 export { default as useTranslation } from "../hooks/useTranslation";
 export { default as preLoadWords } from "../hooks/utils/translation";
 export { default as ImageComponent } from "./ImageComponent";
+

package/src/hooks/utils/translation.js

@@ -80,7 +80,7 @@ export async function preLoadWords(cb) {
    */
   const data = response.data;
   db.words.bulkPut(
-    Object.keys(data).map((x) => ({ text: x, screenId, updatedAt }))
+    Object?.keys(data).map((x) => ({ text: x, screenId, updatedAt }))
   );
   if (typeof cb === "function") cb(data);
   return true;