ADDED : Loading spinner with ou without text

front/public/tailwind.css

@@ -559,6 +559,18 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .fixed {
   position: fixed;
 }
@@ -604,6 +616,30 @@ video {
   margin-right: 0.25rem;
 }
 
+.ml-6 {
+  margin-left: 1.5rem;
+}
+
+.ml-40 {
+  margin-left: 10rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.mt-9 {
+  margin-top: 2.25rem;
+}
+
 .block {
   display: block;
 }
@@ -624,6 +660,10 @@ video {
   height: 1.5rem;
 }
 
+.h-8 {
+  height: 2rem;
+}
+
 .w-full {
   width: 100%;
 }
@@ -636,6 +676,10 @@ video {
   width: auto;
 }
 
+.w-8 {
+  width: 2rem;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -648,6 +692,25 @@ video {
   flex: 1 1 auto;
 }
 
+@-webkit-keyframes spin {
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  -webkit-animation: spin 1s linear infinite;
+          animation: spin 1s linear infinite;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -777,6 +840,15 @@ video {
   background-color: rgb(219 39 119 / var(--tw-bg-opacity));
 }
 
+.bg-sky-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 242 254 / var(--tw-bg-opacity));
+}
+
+.fill-blue-600 {
+  fill: #2563eb;
+}
+
 .p-5 {
   padding: 1.25rem;
 }
@@ -785,6 +857,10 @@ video {
   padding: 1.5rem;
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -915,6 +991,16 @@ video {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.text-gray-200 {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
+.text-blue-800 {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity));
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -983,6 +1069,11 @@ video {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
+
+  .dark\:text-gray-600 {
+    --tw-text-opacity: 1;
+    color: rgb(75 85 99 / var(--tw-text-opacity));
+  }
 }
 
 @media (min-width: 640px) {

front/src/components/TableQueues/QueueRow.js

@@ -3,10 +3,11 @@ import Modal from "../Modal";
 
 const QueueRow = (props) => {
     const [showModal, setShowModal] = useState(false);
+    let style = `bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100 cursor-pointer ${props.classname}`
 
     return (
         <>
-            <tr className="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100 cursor-pointer" onClick={() => setShowModal(true)}>
+            <tr className={style} onClick={() => setShowModal(true)}>
                 <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{props.number}</td>
                 <td className="text-sm text-gray-900 font-light px-6 py-4">
                     {props.name}

front/src/components/TableQueues/TableQueues.js

@@ -23,9 +23,9 @@ const TableQueues = (props) => {
             <QueueRow number="2" name="Name/URL of the queue" msg="45"/>
             <QueueRow number="3" name="Name/URL of the queue" msg="45"/>
             <QueueRow number="4" name="Name/URL of the queue" msg="45"/>
-            <QueueRow number="5" name="Name/URL of the queue" msg="45"/>
-
+            <QueueRow number="5" name="Name/URL of the queue" msg="45" classname="bg-sky-100"/>
             </tbody>
+
         </table>
     )}
 

front/src/stories/LoadingSpinner.stories.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+import {LoadingSpinner} from "./LoadingSpinner";
+
+export default {
+    component: LoadingSpinner,
+    title: 'Example/LoadingSpinner',
+    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+    argTypes: {
+        backgroundColor: {control: 'color'},
+    },
+};
+
+const Template = (args) => <LoadingSpinner {...args} />;
+
+export const Basic = Template.bind({});
+Basic.args = {
+    isLoading: true,
+}
+
+export const WithText = Template.bind({});
+WithText.args = {
+    isLoading: true,
+    text: 'Loading...',
+}
+

front/src/stories/TableRows.jsx

@@ -13,6 +13,22 @@ import {QueueRow} from "./QueueRow";
 const TableRows = ({rows = []}) => {
     return (
         <table>
+            <thead className="bg-gray-200 border-b">
+            <tr>
+                <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
+                    #
+                </th>
+                <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
+                    Nom
+                </th>
+                <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
+                    ARN
+                </th>
+                <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
+                Messages
+                </th>
+            </tr>
+            </thead>
             <tbody>
             {rows.map((row, index) => {
                 return <QueueRow key={index}