From 2ecadca58fdc3693c975814fa9be719c6cc30d6b Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Fri, 8 Dec 2023 19:59:29 -0300
Subject: [PATCH] fix(components): fix loading screen logic and add delay to
 improve user experience

The loading screen was not working correctly due to incorrect logic. The variable `loadingScreen` was not being properly set to `false` when the data was loaded. This has been fixed by changing the condition in the JSX code from `isLoading` to `loadingScreen`.

Additionally, a delay of 600 milliseconds has been added to the loading screen using the `useEffect` hook. This delay gives the user a better visual experience by showing the loading screen for a short period of time before displaying the data.

These changes improve the user experience by providing a more accurate loading screen and a smoother transition when loading data.
---
 .../pages/MainPage/components/components/index.tsx  | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx
index b4c19f181..78c5cf538 100644
--- a/src/frontend/src/pages/MainPage/components/components/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/components/index.tsx
@@ -20,6 +20,7 @@ export default function ComponentsComponent({
   const { setErrorData, setSuccessData } = useContext(alertContext);
   const [pageSize, setPageSize] = useState(10);
   const [pageIndex, setPageIndex] = useState(1);
+  const [loadingScreen, setLoadingScreen] = useState(true);
 
   const navigate = useNavigate();
 
@@ -89,6 +90,12 @@ export default function ComponentsComponent({
     setPageSize(10);
   }
 
+  useEffect(() => {
+    setTimeout(() => {
+      setLoadingScreen(false);
+    }, 600);
+  }, []);
+
   return (
     <CardsWrapComponent
       onFileDrop={onFileDrop}
@@ -96,7 +103,7 @@ export default function ComponentsComponent({
     >
       <div className="flex h-full w-full flex-col justify-between">
         <div className="flex w-full flex-col gap-4">
-          {!isLoading && data.length === 0 ? (
+          {!loadingScreen && data.length === 0 ? (
             <div className="mt-6 flex w-full items-center justify-center text-center">
               <div className="flex-max-width h-full flex-col">
                 <div className="flex w-full flex-col gap-4">
@@ -125,7 +132,7 @@ export default function ComponentsComponent({
             </div>
           ) : (
             <div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-2">
-              {!isLoading || data?.length > 0 ? (
+              {loadingScreen === false && data?.length > 0 ? (
                 data?.map((item, idx) => (
                   <CollectionCardComponent
                     onDelete={() => {
@@ -171,7 +178,7 @@ export default function ComponentsComponent({
             </div>
           )}
         </div>
-        {!isLoading && data.length > 0 && (
+        {!loadingScreen && data.length > 0 && (
           <div className="relative py-6">
             <PaginatorComponent
               storeComponent={true}