feat: add spinner component

Author: ArianHamdi

src/components/Spinner/Spinner.module.scss

@@ -0,0 +1,86 @@
+.container {
+    padding-top: 40px;
+    margin: auto;
+    width: 100%;
+    height: 100%;
+    @include flex-center();
+}
+
+.spinner {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+    transform: scale(0.6);
+}
+.spinner div {
+    transform-origin: 40px 40px;
+    animation: spinner 1.2s linear infinite;
+}
+.spinner div:after {
+    content: ' ';
+    display: block;
+    position: absolute;
+    top: 3px;
+    left: 37px;
+    width: 6px;
+    height: 18px;
+    border-radius: 20%;
+    background: $color-primary;
+}
+.spinner div:nth-child(1) {
+    transform: rotate(0deg);
+    animation-delay: -1.1s;
+}
+.spinner div:nth-child(2) {
+    transform: rotate(30deg);
+    animation-delay: -1s;
+}
+.spinner div:nth-child(3) {
+    transform: rotate(60deg);
+    animation-delay: -0.9s;
+}
+.spinner div:nth-child(4) {
+    transform: rotate(90deg);
+    animation-delay: -0.8s;
+}
+.spinner div:nth-child(5) {
+    transform: rotate(120deg);
+    animation-delay: -0.7s;
+}
+.spinner div:nth-child(6) {
+    transform: rotate(150deg);
+    animation-delay: -0.6s;
+}
+.spinner div:nth-child(7) {
+    transform: rotate(180deg);
+    animation-delay: -0.5s;
+}
+.spinner div:nth-child(8) {
+    transform: rotate(210deg);
+    animation-delay: -0.4s;
+}
+.spinner div:nth-child(9) {
+    transform: rotate(240deg);
+    animation-delay: -0.3s;
+}
+.spinner div:nth-child(10) {
+    transform: rotate(270deg);
+    animation-delay: -0.2s;
+}
+.spinner div:nth-child(11) {
+    transform: rotate(300deg);
+    animation-delay: -0.1s;
+}
+.spinner div:nth-child(12) {
+    transform: rotate(330deg);
+    animation-delay: 0s;
+}
+@keyframes spinner {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}

src/components/Spinner/Spinner.tsx

@@ -0,0 +1,24 @@
+import styles from './Spinner.module.scss';
+
+const Spinner = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.spinner}>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+  );
+};
+
+export default Spinner;

src/components/Spinner/index.ts

@@ -0,0 +1 @@
+export { default } from './Spinner';

src/containers/Category/Category.tsx

@@ -11,6 +11,7 @@ import LinkButton from '@/components/LinkButton';
 import TodoList from '@/components/TodoList';
 import Header from '@/components/Header';
 import { useBackButton } from '@/hooks/useBackButton';
+import Spinner from '@/components/Spinner';
 
 const Category = () => {
   const {
@@ -25,7 +26,7 @@ const Category = () => {
 
   const { mutate } = useDeleteCategory();
 
-  if (isLoading) return 'loading ...';
+  if (isLoading) return <Spinner />;
 
   if (!data) return <NotFound />;
 

src/containers/CategoryForm/CategoryForm.tsx

@@ -18,6 +18,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import Header from '@/components/Header';
 import { useBackButton } from '@/hooks/useBackButton';
 import NotFound from '@/components/NotFound';
+import Spinner from '@/components/Spinner';
 
 interface IProps {
   type: IFormType;
@@ -69,7 +70,7 @@ const CategoryForm = ({ type }: IProps) => {
 
   useClosingBehaviour(isValid);
 
-  if (isLoading) return 'loading...';
+  if (type === 'edit' && isLoading) return <Spinner />;
 
   if (!category && type === 'edit') return <NotFound />;
 

src/containers/Landing/Landing.tsx

@@ -5,16 +5,19 @@ import { useTranslation } from '@/hooks/useTranslation/useTranslation';
 import LinkButton from '@/components/LinkButton';
 import Profile from '@/components/Profile';
 import { useBackButton } from '@/hooks/useBackButton';
+import Spinner from '@/components/Spinner';
 
 const Landing = () => {
   useBackButton();
-  const { data } = useCategories();
+  const { data, isLoading } = useCategories();
   const { t } = useTranslation();
 
   const items = data?.map(category => (
     <Category key={category.id} {...category} />
   ));
 
+  if (isLoading) return <Spinner />;
+
   return (
     <div className={styles.landing}>
       <Profile />

src/containers/TaskForm/TaskForm.tsx

@@ -18,6 +18,7 @@ import { useCreateTask, useEditTask, useTask } from '@/hooks/api/task';
 import Header from '@/components/Header';
 import { useBackButton } from '@/hooks/useBackButton';
 import NotFound from '@/components/NotFound';
+import Spinner from '@/components/Spinner';
 
 interface IProps {
   type: IFormType;
@@ -85,7 +86,7 @@ const TaskForm = ({ type }: IProps) => {
 
   useClosingBehaviour(isValid);
 
-  if (isLoading) return 'loading...';
+  if (type === 'edit' && isLoading) return <Spinner />;
 
   if (!task && type === 'edit') return <NotFound />;
 

src/containers/TodoList/TodoList.tsx

@@ -12,6 +12,7 @@ import Task from '@/components/Task';
 import { useDeleteTodoList, useTodoList } from '@/hooks/api/todo-list';
 import Header from '@/components/Header';
 import { useBackButton } from '@/hooks/useBackButton';
+import Spinner from '@/components/Spinner';
 
 const TodoList = () => {
   const {
@@ -26,7 +27,7 @@ const TodoList = () => {
 
   const { mutate } = useDeleteTodoList();
 
-  if (isLoading) return 'loading ...';
+  if (isLoading) return <Spinner />;
 
   if (!data) return <NotFound />;
 

src/containers/TodoListForm/TodoListForm.tsx

@@ -16,6 +16,7 @@ import {
 import Header from '@/components/Header';
 import { useBackButton } from '@/hooks/useBackButton';
 import NotFound from '@/components/NotFound';
+import Spinner from '@/components/Spinner';
 
 interface IProps {
   type: IFormType;
@@ -68,7 +69,7 @@ const TodoListForm = ({ type }: IProps) => {
 
   useClosingBehaviour(isValid);
 
-  if (isLoading) return 'loading...';
+  if (type === 'edit' && isLoading) return <Spinner />;
 
   if (!todoList && type === 'edit') return <NotFound />;
 

src/layouts/RootLayout/RootLayout.module.scss

@@ -1,3 +1,3 @@
 .layout {
-    // padding: 10px;
+    height: 100%;
 }

src/styles/globals.scss

@@ -15,7 +15,8 @@ body {
     @include no-select;
 }
 
-input,textarea{
+input,
+textarea {
     color: inherit;
 }