add loader

resources/js/components/SVG.tsx

@@ -29,6 +29,26 @@ export const EditSVG: FC<ComponentProps<any>> = (props) => SVGSkeleton({
     ...props
 })
 
+export const LoaderSVG: FC<ComponentProps<any>> = (props) => SVGSkeleton({
+    viewBox: "0 0 38 38",
+    stroke: props.color ?? "#000",
+    paths: <g fill="none" fillRule="evenodd">
+        <g transform="translate(1 1)">
+            <circle strokeOpacity=".5" cx="18" cy="18" r="18"/>
+            <path d="M36 18c0-9.94-8.06-18-18-18">
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 18 18"
+                    to="360 18 18"
+                    dur="1s"
+                    repeatCount="indefinite"/>
+            </path>
+        </g>
+    </g>,
+    ...props
+})
+
 export const PauseSVG: FC<ComponentProps<any>> = (props) => SVGSkeleton({
     paths: <path d="M16 19q-.825 0-1.412-.587T14 17V7q0-.825.588-1.412T16 5q.825 0 1.413.588T18 7v10q0 .825-.587 1.413T16 19m-8 0q-.825 0-1.412-.587T6 17V7q0-.825.588-1.412T8 5q.825 0 1.413.588T10 7v10q0 .825-.587 1.413T8 19"/>,
     ...props

resources/js/components/toDos/ToDoFinish.tsx

@@ -1,12 +1,12 @@
 import React, {FC, useEffect, useState} from "react"
 import useAxiosTools from "../../hooks/AxiosTools"
 import {toDo} from "../../utilities/types"
-import {PlaySVG} from "../SVG"
+import {LoaderSVG, PlaySVG} from "../SVG"
 
 const ToDoFinish: FC<ToDoFinishProps>  = ({reload}) => {
 
     const [showTodos, setShowTodos] = useState(false)
-    const {loading, setLoading, errorCatch, errorLabel, axiosGet} = useAxiosTools(true)
+    const {loading, setLoading, errorCatch, errorLabel, axiosGet} = useAxiosTools()
     const [toDos, setToDos] = useState<toDo[]>([])
 
     useEffect(() => {
@@ -26,6 +26,7 @@ const ToDoFinish: FC<ToDoFinishProps>  = ({reload}) => {
 
     const fetchFinishToDos = async () => {
         try {
+            setLoading(true)
             const res = await axiosGet('api/todos/finished')
             setToDos(res.data)
         } catch (error) {
@@ -38,18 +39,22 @@ const ToDoFinish: FC<ToDoFinishProps>  = ({reload}) => {
     return <div>
         <button className="flex w-full cursor-pointer items-center justify-between rounded bg-blue-700 px-2 py-1"
                 onClick={handleShow}>
-            <h2 className="inline">Tâches terminées</h2>
+            <h2 className="inline">
+                Tâches terminées
+                {loading && <LoaderSVG className="mb-px ml-2 inline h-5 stroke-white" />}
+            </h2>
+
             <span><PlaySVG className={`w-4 transition ${showTodos ? 'rotate-90' : 'rotate-180'}`} /></span>
         </button>
 
         {errorLabel()}
         {showTodos && <ul className="m-2 list-disc">
-        {toDos.map(toDo => <li key={toDo.id} className="flex gap-2">
-            <span>{toDo.checked ? (new Date(toDo.checked)).toSmallFrDate() : ''}</span>
-            <span className="flex-1">{toDo.name}</span>
-            <span>{toDo.duration.durationify()}</span>
-
-        </li>)}
+            {toDos.length === 0 && <li className="flex">Aucun contenu a disponible</li>}
+            {toDos.map(toDo => <li key={toDo.id} className="flex gap-2">
+                <span>{toDo.checked ? (new Date(toDo.checked)).toSmallFrDate() : ''}</span>
+                <span className="flex-1">{toDo.name}</span>
+                <span>{toDo.duration.durationify()}</span>
+            </li>)}
         </ul>}
     </div>
 }

resources/js/pages/TimeTrackersIndex.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from "react"
 import useAxiosTools from "../hooks/AxiosTools"
 import {timeTracker} from "../utilities/types"
-import {EditSVG, PlaySVG} from "../components/SVG"
+import {EditSVG, LoaderSVG, PlaySVG} from "../components/SVG"
 import useTracker from "../hooks/TraskerHook"
 import {Modal} from "../components/Modals"
 import TimeTrackerEdit from "../components/TimeTrackers/TimeTrackerEdit"
@@ -38,6 +38,8 @@ const TimeTrackersIndex = () => {
     return <div className="p-5">
         {errorLabel()}
         <ul>
+            {loading && <LoaderSVG className="mb-px ml-2 inline h-5 stroke-white" />}
+            {timeTrackers.length === 0 && <li className="flex">Aucun contenu a disponible</li>}
             {timeTrackers.map(tracker => <li key={tracker.id} className="flex justify-between gap-5 odd:bg-blue-950">
                 <span className="w-24 text-center">{tracker.start_at ? (new Date(tracker.start_at)).toSmallFrDate() : ''}</span>
                 <span className="w-24 text-center">{(new Date(tracker.end_at)).toSmallFrDate()}</span>