refactor: tweaks styles for providers table

.env.template

@@ -1,2 +1,5 @@
+SITE_URL=http://localhost:3000
+API_BASE_URL=http://localhost:8080/api/v1
+
 # openssl rand -base64 32
 AUTH_SECRET=your-secret-key

components/filters/CustomSearchInput.tsx

@@ -3,7 +3,7 @@ import { XCircle } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
 import React, { useCallback, useEffect, useState } from "react";
 
-// import { useDebounce } from "../../hooks/useDebounce";
+import { useDebounce } from "../../hooks/useDebounce";
 
 export const CustomSearchInput: React.FC = () => {
   const router = useRouter();
@@ -13,7 +13,7 @@ export const CustomSearchInput: React.FC = () => {
   // });
   const [searchQuery, setSearchQuery] = useState("");
 
-  // const debouncedSearchQuery = useDebounce(searchQuery, 500);
+  const debouncedSearchQuery = useDebounce(searchQuery, 500);
   // console.log("debouncedSearchQuery", debouncedSearchQuery);
 
   const applySearch = useCallback(

components/providers/CheckConnectionProvider.tsx

@@ -27,15 +27,16 @@ export const CheckConnectionProvider = ({ id }: { id: string }) => {
       });
     } else {
       toast({
-        title: "Success!",
-        description: "The connection was updated successfully.",
+        title: "Checking",
+        description: "The task was launched successfully",
       });
     }
   }
+
   return (
     <form ref={ref} action={clientAction} className="flex gap-x-2">
       <input type="hidden" name="id" value={id} />
-      <CustomButtonClientAction buttonLabel="Check Connection" />
+      <CustomButtonClientAction buttonLabel="Check connection" />
     </form>
   );
 };

components/providers/ProviderInfo.tsx

@@ -7,6 +7,7 @@ import {
   GCPProviderBadge,
   KS8ProviderBadge,
 } from "../icons/providers-badge";
+import { CustomLoader } from "../ui/custom";
 
 interface ProviderInfoProps {
   connected: boolean | null;
@@ -24,23 +25,23 @@ export const ProviderInfo: React.FC<ProviderInfoProps> = ({
       case true:
         return (
           <div className="flex items-center justify-center rounded-medium border p-1 bg-system-success-lighter border-system-success">
-            <ConnectionIcon className="text-system-success" size={28} />
+            <ConnectionIcon className="text-system-success" size={24} />
           </div>
         );
       case false:
         return (
-          <div className="flex items-center justify-center rounded-medium border p-1 bg-danger-lighter border-danger">
-            <ConnectionIcon className="text-danger" size={28} />
+          <div className="flex items-center justify-center rounded-medium border p-1 bg-system-error-lighter border-danger">
+            <ConnectionIcon className="text-danger" size={24} />
           </div>
         );
       case null:
         return (
           <div className="flex items-center justify-center rounded-medium border p-1 bg-info-lighter border-info-lighter">
-            <ConnectionIcon className="text-info" size={28} />
+            <ConnectionIcon className="text-info" size={24} />
           </div>
         );
       default:
-        return <ConnectionIcon size={28} />;
+        return <ConnectionIcon size={24} />;
     }
   };
 
@@ -67,7 +68,7 @@ export const ProviderInfo: React.FC<ProviderInfoProps> = ({
           <div className="flex-shrink-0">{getIcon()}</div>
           <div className="flex flex-col">
             <span className="text-md font-semibold">{providerAlias}</span>
-            <span className="text-sm text-gray-500">{providerAlias}</span>
+            {/* <CustomLoader size="small" /> */}
           </div>
         </div>
       </div>

components/providers/table/ColumnsProvider.tsx

@@ -38,7 +38,7 @@ const iconClasses =
 
 export const ColumnsProvider: ColumnDef<ProviderProps>[] = [
   {
-    header: "ID",
+    header: "n",
     cell: ({ row }) => <p className="text-medium">{row.index + 1}</p>,
   },
   {
@@ -60,7 +60,7 @@ export const ColumnsProvider: ColumnDef<ProviderProps>[] = [
     },
   },
   {
-    accessorKey: "account",
+    accessorKey: "id",
     header: ({ column }) => (
       <DataTableColumnHeader column={column} title={"Id"} param="provider_id" />
     ),

components/ui/custom/CustomLoader.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export const CustomLoader = (props: { size?: "small" }) => {
+  const [loadingSpinner, setloadingSpinner] = useState(0);
+  const loadingChars = "|/-\\";
+
+  const textClasses = `w-xs px-xs ${props.size === "small" ? "!text-s" : ""}`;
+
+  useEffect(() => {
+    setTimeout(() => setloadingSpinner(loadingSpinner + 1), 150);
+  }, [loadingSpinner]);
+
+  return <p className={textClasses}>{loadingChars[loadingSpinner % 4]}</p>;
+};

components/ui/custom/index.ts

@@ -1,3 +1,4 @@
 export * from "./CustomBox";
 export * from "./CustomButtonClientAction";
 export * from "./CustomInput";
+export * from "./CustomLoader";