From e60325eb4b8579a9bf6be1c1489886f00e2bfcc4 Mon Sep 17 00:00:00 2001
From: Tobias Prima <primatjahja@gmail.com>
Date: Thu, 21 Mar 2024 20:25:35 +0800
Subject: [PATCH 1/3] feat: loading animation

---
 src/features/todos/TodoList.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/features/todos/TodoList.js b/src/features/todos/TodoList.js
index 8edc97c..07604ad 100644
--- a/src/features/todos/TodoList.js
+++ b/src/features/todos/TodoList.js
@@ -30,11 +30,11 @@ const TodoList = () => {
         isError,
         refetch: refetchTodos
     } = useGetTodosQuery()
-    const [ addTodo ] = useAddTodoMutation()
-    const [ doneTodo ] = useDoneTodoMutation()
-    const [ deleteTodo ] = useDeleteTodoMutation()
-    const [ reorderTodo ] = useReorderTodoMutation()
-    const [ resetTodo ] = useResetTodoMutation()
+    const [ addTodo, { isLoading: addTodoLoading } ] = useAddTodoMutation()
+    const [ doneTodo, { isLoading: doneTodoLoading } ] = useDoneTodoMutation()
+    const [ deleteTodo, { isLoading: deleteTodoLoading } ] = useDeleteTodoMutation()
+    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 || addTodoLoading || doneTodoLoading || deleteTodoLoading || reorderTodoLoading || resetTodoLoading) {
         content = <Loader />
     } else if (isSuccess){
         let sortedTodos = todos;

From 25b2b30913913a2e386f8d877a753a4af9148b29 Mon Sep 17 00:00:00 2001
From: Tobias Prima <primatjahja@gmail.com>
Date: Thu, 21 Mar 2024 20:26:34 +0800
Subject: [PATCH 2/3] feat: infos

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

diff --git a/src/features/todos/TodoList.js b/src/features/todos/TodoList.js
index 07604ad..a394d3a 100644
--- a/src/features/todos/TodoList.js
+++ b/src/features/todos/TodoList.js
@@ -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

From 40e3fe6ecea8ebb5c1d4db1cdd74621fe665c779 Mon Sep 17 00:00:00 2001
From: Tobias Prima <primatjahja@gmail.com>
Date: Thu, 21 Mar 2024 20:29:19 +0800
Subject: [PATCH 3/3] feat: improve ui

---
 src/features/todos/TodoList.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/features/todos/TodoList.js b/src/features/todos/TodoList.js
index a394d3a..0914dda 100644
--- a/src/features/todos/TodoList.js
+++ b/src/features/todos/TodoList.js
@@ -30,9 +30,9 @@ const TodoList = () => {
         isError,
         refetch: refetchTodos
     } = useGetTodosQuery()
-    const [ addTodo, { isLoading: addTodoLoading } ] = useAddTodoMutation()
-    const [ doneTodo, { isLoading: doneTodoLoading } ] = useDoneTodoMutation()
-    const [ deleteTodo, { isLoading: deleteTodoLoading } ] = useDeleteTodoMutation()
+    const [ addTodo ] = useAddTodoMutation()
+    const [ doneTodo ] = useDoneTodoMutation()
+    const [ deleteTodo ] = useDeleteTodoMutation()
     const [ reorderTodo, { isLoading: reorderTodoLoading } ] = useReorderTodoMutation()
     const [ resetTodo, { isLoading: resetTodoLoading } ] = useResetTodoMutation()
 
@@ -133,7 +133,7 @@ const TodoList = () => {
     }
 
     let content;
-    if (isLoading || addTodoLoading || doneTodoLoading || deleteTodoLoading || reorderTodoLoading || resetTodoLoading) {
+    if (isLoading || reorderTodoLoading || resetTodoLoading) {
         content = <Loader />
     } else if (isSuccess){
         let sortedTodos = todos;