From 01886ad6db8a78fbacabff5e3bd5864391e5a48f Mon Sep 17 00:00:00 2001
From: Tobias Prima <88434271+tobiasprima@users.noreply.github.com>
Date: Thu, 21 Mar 2024 21:04:48 +0800
Subject: [PATCH] feat: loading network calls (#15)

---
 src/features/todos/TodoList.js |  9 ++++++---
 src/index.css                  | 18 ++++++++++++++++++
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/features/todos/TodoList.js b/src/features/todos/TodoList.js
index 8edc97c..0914dda 100644
--- a/src/features/todos/TodoList.js
+++ b/src/features/todos/TodoList.js
@@ -33,8 +33,8 @@ const TodoList = () => {
     const [ addTodo ] = useAddTodoMutation()
     const [ doneTodo ] = useDoneTodoMutation()
     const [ deleteTodo ] = useDeleteTodoMutation()
-    const [ reorderTodo ] = useReorderTodoMutation()
-    const [ resetTodo ] = useResetTodoMutation()
+    const [ reorderTodo, { isLoading: reorderTodoLoading } ] = useReorderTodoMutation()
+    const [ resetTodo, { isLoading: resetTodoLoading } ] = useResetTodoMutation()
 
 
     // Effect to load todos from local storage if there is cache
@@ -133,7 +133,7 @@ const TodoList = () => {
     }
 
     let content;
-    if (isLoading) {
+    if (isLoading || reorderTodoLoading || resetTodoLoading) {
         content = <Loader />
     } else if (isSuccess){
         let sortedTodos = todos;
@@ -190,6 +190,9 @@ const TodoList = () => {
                 handleSubmit={handleSubmit}
             />
         </div>
+        <div className="infos">
+            <span className="ps">Because the backend is hosted on a free cloud provider, the request may take a while.</span>
+        </div>
     </main>
   )
 }
diff --git a/src/index.css b/src/index.css
index b5d19c3..b48b0ea 100644
--- a/src/index.css
+++ b/src/index.css
@@ -285,4 +285,22 @@ input:checked + .slider:before {
   display: flex;
   justify-content: center;
   align-items: center;
+}
+
+.infos{
+  position: fixed;
+  margin-top: 1rem;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 600px;
+}
+
+.ps {
+  justify-content: center;
+  margin-left: 1rem;
+  align-items: center;
+  width: 600px;
+  font-size: 15px;
 }
\ No newline at end of file