From 113e220fcf5742c2e2a4f6c3474c54e9056a6fa3 Mon Sep 17 00:00:00 2001
From: amirhossein-haerian <ahae@kth.se>
Date: Tue, 3 Sep 2024 10:14:56 +0200
Subject: [PATCH] feat(KUI-1378): delay is added to the shimmer effect

---
 .../RoundInformation/RoundInformation.jsx      | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/public/js/app/components/RoundInformation/RoundInformation.jsx b/public/js/app/components/RoundInformation/RoundInformation.jsx
index dddc929a..638f7d4c 100644
--- a/public/js/app/components/RoundInformation/RoundInformation.jsx
+++ b/public/js/app/components/RoundInformation/RoundInformation.jsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 
 import Alert from '../../components-shared/Alert'
 import BankIdAlert from '../../components/BankIdAlert'
@@ -42,8 +42,22 @@ function RoundInformation({ courseCode, courseData, courseRound, semesterRoundSt
   const isLoading = courseEmployeesLoading || plannedModulesIsLoading
   const isError = courseEmployeesError || plannedModulesError
 
+  const [isLoaderVisible, setIsLoaderVisible] = useState(false)
+
+  useEffect(() => {
+    let timer
+    if (isLoading) {
+      setIsLoaderVisible(true)
+    } else {
+      timer = setTimeout(() => {
+        setIsLoaderVisible(false)
+      }, 300)
+    }
+    return () => clearTimeout(timer)
+  }, [isLoading])
+
   return (
-    <div className={`roundInformation ${!isError && isLoading ? 'shimmer-effect' : 'fadeIn'}`}>
+    <div className={`roundInformation ${!isError && isLoaderVisible ? 'shimmer-effect' : 'fadeIn'}`}>
       <h3>
         {translation.courseRoundInformation.round_header} {selectedRoundHeader}
       </h3>