From 1e1cd6ebe5130179c9d5369a3d0252fb42826962 Mon Sep 17 00:00:00 2001
From: Ahmed Cool Projects
 <72823374+AhmedCoolProjects@users.noreply.github.com>
Date: Mon, 5 Dec 2022 23:41:58 +0100
Subject: [PATCH] fixing loading for keylovefaq component (#1692)

## Description

<!-- Insert PR description-->

## Type of change

<!--- Please check the type of change your PR introduces: --->
- [ ] :sunflower: Feature
- [x] :bug: Bugfix
- [ ] :world_map: Documentation
- [ ] :robot: Test
- [ ] :computer: CI/Deployment
- [ ] :hamster: Trivial/Minor

## Issue(s)

<!-- Can reference multiple issues. Use one of the following "magic words" - "closes, fixes" to auto-close the Github issue. -->
* #<issue>

## Test Plan

<!-- How will this be tested prior to merging.-->
- [ ] :muscle: Manual
- [ ] :zap: Unit test
- [ ] :green_heart: E2E
---
 website/src/components/parts/KeyLoveFAQ.js | 30 +++++++++++++---------
 website/src/components/parts/MainComp.js   |  4 +--
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/website/src/components/parts/KeyLoveFAQ.js b/website/src/components/parts/KeyLoveFAQ.js
index 9574f70e5..1fcc9ac0f 100644
--- a/website/src/components/parts/KeyLoveFAQ.js
+++ b/website/src/components/parts/KeyLoveFAQ.js
@@ -1,19 +1,24 @@
-import React, { useEffect } from "react";
-import feather from "feather-icons";
-import { WOW } from "wowjs";
-import { jarallax } from "jarallax";
+import React, { useEffect, useRef } from "react";
 import { Icon } from "@iconify/react";
-import "animate.css";
-import "tw-elements";
 
 export default function KeyLoveFAQ() {
+  const jarallaxRef = useRef(null);
   useEffect(() => {
-    new WOW().init();
-    feather.replace();
-    jarallax(document.querySelectorAll(".jarallax"), {
-      speed: 0.2,
-    });
-  });
+    if (typeof window !== "undefined") {
+      const WOW = require("wowjs");
+      const father = require("feather-icons");
+      const jarallax = require("jarallax");
+      require("tw-elements");
+
+      new WOW.WOW({
+        live: false,
+      }).init();
+      father.replace();
+      jarallax.jarallax(jarallaxRef.current, {
+        speed: 0.2,
+      });
+    }
+  }, []);
 
   return (
     <section className="relative md:py-24 !tracking-wide py-16 overflow-hidden">
@@ -448,6 +453,7 @@ export default function KeyLoveFAQ() {
               <div className="relative rounded-xl overflow-hidden shadow-md dark:shadow-gray-800">
                 <div
                   className="w-full jarallax py-72 bg-slate-400 custom-bg_ bg-no-repeat bg-top"
+                  ref={jarallaxRef}
                   data-jarallax='{"speed": 0.1}'
                 ></div>
               </div>
diff --git a/website/src/components/parts/MainComp.js b/website/src/components/parts/MainComp.js
index d03c35f41..3098d2bfa 100644
--- a/website/src/components/parts/MainComp.js
+++ b/website/src/components/parts/MainComp.js
@@ -5,8 +5,8 @@ import Hero from "./Hero";
 import Demo from "./Demo";
 import FourthSection from "./FourthSection";
 import Cookies from "./Cookies";
+import KeyLoveFAQ from "./KeyLoveFAQ";
 
-const KeyLoveFAQComp = loadable(() => import("./KeyLoveFAQ"));
 const BackToTopComp = loadable(() => import("./BackToTop"));
 
 export function MainComp() {
@@ -14,7 +14,7 @@ export function MainComp() {
     <>
       <Hero />
       <Demo />
-      <KeyLoveFAQComp />
+      <KeyLoveFAQ />
       <FourthSection />
       <BackToTopComp />
       <Cookies />