add loading

emiscode · Jul 3, 2024 · 5a346dd · 5a346dd
1 parent 29ef3d7
commit 5a346dd
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 5 deletions.
diff --git a/app/actions.tsx b/app/actions.tsx
@@ -2,7 +2,7 @@
 
 import { Company } from "./types";
 
-const API_BASE_URL = "http://localhost:3000";
+const API_BASE_URL = process.env.API_BASE_URL;
 
 export const fetchCompanies = async (): Promise<Company[]> => {
   const response = await fetch(`${API_BASE_URL}/api/companies`);

diff --git a/app/components/AssetContent.tsx b/app/components/AssetContent.tsx
@@ -15,7 +15,7 @@ const AssetContent: React.FC<AssetContentProps> = ({ selectedNode }) => {
       ) : (
         <div className="flex w-full justify-center p-4">
           <p className="text-gray-800 font-bold">
-            Select an asset to view details
+            Selecione um ativo para ver detalhes
           </p>
         </div>
       )}

diff --git a/app/components/Assets.tsx b/app/components/Assets.tsx
@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
 import { fetchAssets, fetchLocations } from "../actions";
 import Sidebar from "./Sidebar";
 import AssetContent from "./AssetContent";
+import { ZapIcon } from "lucide-react";
 
 export default function Assets() {
   const { assets, isFiltered, setIsFiltered } = useAssetStore();
@@ -157,15 +158,19 @@ export default function Assets() {
         </h1>
         <div className="flex gap-x-4">
           <Button
+            className="flex gap-x-1 items-center"
             variant={isFilteredBySensor ? "secondary" : "outline"}
             onClick={handleFilterSensorClick}
           >
+            <ZapIcon className="w-4 h-4 text-primary-blue" />
             Sensor de Energia
           </Button>
           <Button
+            className="flex gap-x-1 items-center"
             variant={isFilteredByAlert ? "secondary" : "outline"}
             onClick={handleFilterAlertClick}
           >
+            <ZapIcon className="w-4 h-4 text-primary-blue" />
             Crítico
           </Button>
         </div>

diff --git a/app/components/Button.tsx b/app/components/Button.tsx
@@ -29,7 +29,7 @@ const Button: React.FC<ButtonProps> = ({
       break;
     case "outline":
       variantStyle =
-        "bg-white text-gray-800 hover:bg-secondary-blue hover:text-white border border-secondary";
+        "bg-white text-primary-blue hover:bg-secondary-blue hover:text-white border border-secondary";
       break;
     default:
       break;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -7,13 +7,18 @@ import { useEffect } from "react";
 import Button from "./components/Button";
 import { useAssetStore } from "@/store/assetsStore";
 import { AssetTree } from "./types";
+import { FullScreenLoading } from "@/components/ui/FullScreenLoading";
+import { Building2Icon, BuildingIcon } from "lucide-react";
 
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const { data: companiesData } = useSWR("companies", fetchCompanies);
+  const { data: companiesData, isLoading } = useSWR(
+    "companies",
+    fetchCompanies
+  );
   const {
     assets,
     addAsset,
@@ -41,6 +46,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
+        {isLoading && <FullScreenLoading dark={true} />}
         <header className="flex justify-between items-center w-full px-6 py-4 shadow-md bg-background-blue">
           <div className="text-white text-xl font-semi">Tractian</div>
           <div className="flex">
@@ -49,9 +55,10 @@ export default function RootLayout({
                 <Button
                   key={asset.companyId}
                   variant={asset.selected ? "secondary" : "primary"}
-                  className="mx-2 text-muted-foreground"
+                  className="mx-2 text-muted-foreground flex gap-x-2 items-center"
                   onClick={() => updateSelectedAsset(asset)}
                 >
+                  <Building2Icon className="w-4 h-4 text-white" />
                   {asset.companyName}
                 </Button>
               ))}

diff --git a/components/ui/FullScreenLoading.tsx b/components/ui/FullScreenLoading.tsx
@@ -0,0 +1,30 @@
+import { twMerge } from "tailwind-merge";
+import Loading from "./Loading";
+
+type Props = {
+  dark?: boolean;
+  message?: string;
+};
+
+export function FullScreenLoading({ dark = false, message }: Props) {
+  return (
+    <div
+      className={twMerge(
+        "absolute inset-0 flex items-center justify-center z-50",
+        dark ? "bg-black bg-opacity-75" : "bg-white bg-opacity-75"
+      )}
+    >
+      <div className="flex flex-col items-center justify-center">
+        <p
+          className={twMerge(
+            dark ? "text-white" : "text-black",
+            "text-2xl p-4"
+          )}
+        >
+          {message}
+        </p>
+        <Loading />
+      </div>
+    </div>
+  );
+}
diff --git a/components/ui/Loading.tsx b/components/ui/Loading.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import Spinner from "./Spinner";
+
+const Loading = () => {
+  return (
+    <div className="relative w-full h-full z-50">
+      <div className="flex items-center justify-center">
+        <Spinner size="md" />
+      </div>
+    </div>
+  );
+};
+
+export default Loading;
diff --git a/components/ui/Spinner.tsx b/components/ui/Spinner.tsx
@@ -0,0 +1,18 @@
+type Props = {
+  size: "xs" | "md" | "lg" | "sm";
+};
+const Spinner = ({ size }: Props) => {
+  const dimensions = {
+    md: "h-16 w-16",
+    lg: "h-32 w-32",
+    sm: "h-8 w-8",
+    xs: "h-4 w-4",
+  };
+  return (
+    <div
+      className={`animate-spin rounded-full border-t-2 border-b-2 border-gray-500 ${dimensions[size]}`}
+    ></div>
+  );
+};
+
+export default Spinner;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "react": "^18",
     "react-dom": "^18",
     "swr": "^2.2.5",
+    "tailwind-merge": "^2.3.0",
     "zustand": "^4.5.4"
   },
   "devDependencies": {