react-live-data-table 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-live-data-table",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Your React component package with Tailwind",
   "main": "src/index.js",
   "module": "dist/index.esm.js",

package/src/ReactDataTable.jsx

@@ -190,16 +190,30 @@ function ReactDataTable({
     <div className="bg-white relative w-full">
       {loading && (
         <div className="absolute inset-0 bg-white/50 z-20 flex items-center justify-center">
-          <div className={`flex items-center justify-center`}>
-        <div role="status" className="relative">
           <svg
-            className={`animate-spin w-6 h-6}`}
+            style={{
+              animation: 'spin 1s linear infinite',
+              width: '24px',
+              height: '24px'
+            }}
             viewBox="0 0 24 24"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
           >
+            <style>
+              {`
+        @keyframes spin {
+          from {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+      `}
+            </style>
             <circle
-              className="opacity-25"
+              style={{ opacity: 0.25 }}
               cx="12"
               cy="12"
               r="10"
@@ -207,14 +221,12 @@ function ReactDataTable({
               strokeWidth="4"
             />
             <path
-              className="opacity-75"
+              style={{ opacity: 0.75 }}
               fill="currentColor"
               d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
             />
           </svg>
-          <span className="sr-only">Loading...</span>
-        </div>
-      </div>
+
         </div>
       )}