From 83675e90ec2be353528f4ccaed2a70adcf9e594e Mon Sep 17 00:00:00 2001
From: escapedcat <github@htmlcss.de>
Date: Wed, 30 Oct 2024 13:23:01 +0100
Subject: [PATCH 1/5] refactor(home): use nextui buttons for txCard

---
 .../Home/TransactionCard/TransactionCard.tsx  | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/pages/Home/TransactionCard/TransactionCard.tsx b/src/pages/Home/TransactionCard/TransactionCard.tsx
index 94574d27..871cb70d 100644
--- a/src/pages/Home/TransactionCard/TransactionCard.tsx
+++ b/src/pages/Home/TransactionCard/TransactionCard.tsx
@@ -9,6 +9,7 @@ import {
   InformationCircleIcon,
   LockClosedIcon,
 } from "@heroicons/react/24/outline";
+import { Button } from "@nextui-org/react";
 import { FC, useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -110,21 +111,23 @@ const TransactionCard: FC<Props> = ({
 
         {transactions.length > 0 && (
           <div className="mt-auto flex justify-around py-5">
-            <button
+            <Button
+              isIconOnly
+              aria-label="page backward"
               onClick={pageBackwardHandler}
-              disabled={page === 0}
-              className="flex rounded bg-black p-2 text-white hover:bg-gray-700 disabled:opacity-50 disabled:hover:bg-black"
+              isDisabled={page === 0}
             >
               <ArrowDownIcon className="h-6 w-6 rotate-90 transform" />
-            </button>
+            </Button>
 
-            <button
-              className="flex rounded bg-black p-2 text-white hover:bg-gray-700 disabled:opacity-50 disabled:hover:bg-black"
+            <Button
+              isIconOnly
+              aria-label="page forward"
               onClick={pageForwardHandler}
-              disabled={page * MAX_ITEMS + MAX_ITEMS >= transactions.length}
+              isDisabled={page * MAX_ITEMS + MAX_ITEMS >= transactions.length}
             >
               <ArrowDownIcon className="h-6 w-6 -rotate-90 transform" />
-            </button>
+            </Button>
           </div>
         )}
       </section>

From 7deff889c900e9efe94447d0c5641289aeb8bb2d Mon Sep 17 00:00:00 2001
From: escapedcat <github@htmlcss.de>
Date: Wed, 30 Oct 2024 13:24:59 +0100
Subject: [PATCH 2/5] refactor(home): use nextui alert for txCard

---
 src/pages/Home/TransactionCard/TransactionCard.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/pages/Home/TransactionCard/TransactionCard.tsx b/src/pages/Home/TransactionCard/TransactionCard.tsx
index 871cb70d..a58f9bc6 100644
--- a/src/pages/Home/TransactionCard/TransactionCard.tsx
+++ b/src/pages/Home/TransactionCard/TransactionCard.tsx
@@ -1,6 +1,6 @@
 import SingleTransaction from "./SingleTransaction";
+import { Alert } from "@/components/Alert";
 import LoadingBox from "@/components/LoadingBox";
-import Message from "@/components/Message";
 import { AppContext } from "@/context/app-context";
 import { Implementation } from "@/models/ln-info";
 import { Transaction } from "@/models/transaction.model";
@@ -75,14 +75,11 @@ const TransactionCard: FC<Props> = ({
       <section className="bd-card flex flex-col transition-colors">
         <h2 className="text-lg font-bold">{t("tx.transactions")}</h2>
 
-        {error && <Message message={error} />}
+        {error && <Alert color="danger">{error}</Alert>}
 
         {/* TODO: Remove after https://github.com/fusion44/blitz_api/issues/87 is resolved & Version 1.10.0 of RaspiBlitz is out */}
         {implementation?.includes("CLN") && (
-          <Message
-            message={t("home.onchain_cln_no_support")}
-            color="bg-yellow-600"
-          />
+          <Alert color="warning">{t("home.onchain_cln_no_support")}</Alert>
         )}
 
         {!error && transactions.length === 0 && (

From 156633f291b872d7490bdf163b0ea95fa21aa0e1 Mon Sep 17 00:00:00 2001
From: escapedcat <github@htmlcss.de>
Date: Wed, 30 Oct 2024 13:32:03 +0100
Subject: [PATCH 3/5] refactor(home): use nextui spinner for txCard

---
 src/pages/Home/TransactionCard/TransactionCard.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/pages/Home/TransactionCard/TransactionCard.tsx b/src/pages/Home/TransactionCard/TransactionCard.tsx
index a58f9bc6..ab4bd72d 100644
--- a/src/pages/Home/TransactionCard/TransactionCard.tsx
+++ b/src/pages/Home/TransactionCard/TransactionCard.tsx
@@ -1,6 +1,5 @@
 import SingleTransaction from "./SingleTransaction";
 import { Alert } from "@/components/Alert";
-import LoadingBox from "@/components/LoadingBox";
 import { AppContext } from "@/context/app-context";
 import { Implementation } from "@/models/ln-info";
 import { Transaction } from "@/models/transaction.model";
@@ -9,6 +8,7 @@ import {
   InformationCircleIcon,
   LockClosedIcon,
 } from "@heroicons/react/24/outline";
+import { Spinner } from "@nextui-org/react";
 import { Button } from "@nextui-org/react";
 import { FC, useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -47,10 +47,6 @@ const TransactionCard: FC<Props> = ({
     );
   }
 
-  if (isLoading) {
-    return <LoadingBox />;
-  }
-
   const pageForwardHandler = () => {
     setPage((p) => p + 1);
   };
@@ -75,6 +71,8 @@ const TransactionCard: FC<Props> = ({
       <section className="bd-card flex flex-col transition-colors">
         <h2 className="text-lg font-bold">{t("tx.transactions")}</h2>
 
+        {isLoading && <Spinner size="lg" />}
+
         {error && <Alert color="danger">{error}</Alert>}
 
         {/* TODO: Remove after https://github.com/fusion44/blitz_api/issues/87 is resolved & Version 1.10.0 of RaspiBlitz is out */}

From 59228fd6d65de7b3355969315c27061136445b86 Mon Sep 17 00:00:00 2001
From: escapedcat <github@htmlcss.de>
Date: Wed, 30 Oct 2024 14:51:22 +0100
Subject: [PATCH 4/5] refactor: use nextui spinner

---
 .../LoadingSpinner/LoadingSpinner.css         | 36 -------------------
 .../LoadingSpinner/LoadingSpinner.tsx         | 22 ------------
 src/pages/Home/BitcoinCard.tsx                | 12 +++++--
 src/pages/Home/ConnectionCard.tsx             | 11 ++++--
 src/pages/Home/HardwareCard.tsx               | 11 ++++--
 src/pages/Home/LightningCard.tsx              | 11 ++++--
 src/pages/Home/ListChannelModal/Channel.tsx   |  2 ++
 7 files changed, 37 insertions(+), 68 deletions(-)
 delete mode 100644 src/components/LoadingSpinner/LoadingSpinner.css
 delete mode 100644 src/components/LoadingSpinner/LoadingSpinner.tsx

diff --git a/src/components/LoadingSpinner/LoadingSpinner.css b/src/components/LoadingSpinner/LoadingSpinner.css
deleted file mode 100644
index 7285ebe3..00000000
--- a/src/components/LoadingSpinner/LoadingSpinner.css
+++ /dev/null
@@ -1,36 +0,0 @@
-/* from https://loading.io/css/ */
-.lds-ring {
-  display: inline-block;
-  position: relative;
-  width: 80px;
-  height: 80px;
-}
-.lds-ring div {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  width: 64px;
-  height: 64px;
-  margin: 8px;
-  border: 8px solid currentColor;
-  border-radius: 50%;
-  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: currentColor transparent transparent transparent;
-}
-.lds-ring div:nth-child(1) {
-  animation-delay: -0.45s;
-}
-.lds-ring div:nth-child(2) {
-  animation-delay: -0.3s;
-}
-.lds-ring div:nth-child(3) {
-  animation-delay: -0.15s;
-}
-@keyframes lds-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/components/LoadingSpinner/LoadingSpinner.tsx b/src/components/LoadingSpinner/LoadingSpinner.tsx
deleted file mode 100644
index 0a095959..00000000
--- a/src/components/LoadingSpinner/LoadingSpinner.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import "./LoadingSpinner.css";
-import type { FC } from "react";
-
-type Props = {
-  color?: string;
-};
-
-const LoadingSpinner: FC<Props> = ({ color }) => {
-  return (
-    <div
-      id="loading-spinner"
-      className={`${color || "text-yellow-500"} lds-ring`}
-    >
-      <div></div>
-      <div></div>
-      <div></div>
-      <div></div>
-    </div>
-  );
-};
-
-export default LoadingSpinner;
diff --git a/src/pages/Home/BitcoinCard.tsx b/src/pages/Home/BitcoinCard.tsx
index e3a93ca5..4495573d 100644
--- a/src/pages/Home/BitcoinCard.tsx
+++ b/src/pages/Home/BitcoinCard.tsx
@@ -1,6 +1,6 @@
-import LoadingBox from "@/components/LoadingBox";
 import { SSEContext } from "@/context/sse-context";
 import { checkPropsUndefined } from "@/utils";
+import { Spinner } from "@nextui-org/react";
 import { FC, useContext } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -9,7 +9,14 @@ export const BitcoinCard: FC = () => {
   const { btcInfo, systemInfo } = useContext(SSEContext);
 
   if (checkPropsUndefined({ btcInfo, systemInfo })) {
-    return <LoadingBox />;
+    return (
+      <div className="h-full">
+        <section className="bd-card">
+          <h2 className="text-lg font-bold">{t("home.bitcoin")}</h2>
+          <Spinner size="lg" />
+        </section>
+      </div>
+    );
   }
 
   const {
@@ -33,6 +40,7 @@ export const BitcoinCard: FC = () => {
     <div className="h-full">
       <section className="bd-card">
         <h2 className="text-lg font-bold">{t("home.bitcoin")}</h2>
+
         <div className="flex overflow-hidden py-4">
           <article className="w-1/2">
             <h6 className="text-sm text-gray-200">{t("home.version")}</h6>
diff --git a/src/pages/Home/ConnectionCard.tsx b/src/pages/Home/ConnectionCard.tsx
index dfd7439e..139011cc 100644
--- a/src/pages/Home/ConnectionCard.tsx
+++ b/src/pages/Home/ConnectionCard.tsx
@@ -1,5 +1,4 @@
 import QRCodeModal from "./QRCodeModal";
-import LoadingBox from "@/components/LoadingBox";
 import { SSEContext } from "@/context/sse-context";
 import useClipboard from "@/hooks/use-clipboard";
 import {
@@ -8,6 +7,7 @@ import {
   EyeSlashIcon,
   QrCodeIcon,
 } from "@heroicons/react/24/outline";
+import { Spinner } from "@nextui-org/react";
 import { FC, useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Tooltip } from "react-tooltip";
@@ -33,8 +33,8 @@ export const ConnectionCard: FC = () => {
 
   if (!sshAddress) {
     return (
-      <div className="h-full w-1/2">
-        <LoadingBox />
+      <div className="bd-card w-full transition-colors lg:mr-2 lg:w-1/2">
+        <Spinner size="lg" />
       </div>
     );
   }
@@ -52,6 +52,7 @@ export const ConnectionCard: FC = () => {
       {showModal && (
         <QRCodeModal closeModal={closeModalHandler} identityUri={nodeId} />
       )}
+
       <div className="bd-card w-full transition-colors lg:mr-2 lg:w-1/2">
         <div className="flex items-center text-lg font-bold">
           {t("home.conn_details")}&nbsp;
@@ -72,6 +73,7 @@ export const ConnectionCard: FC = () => {
             {<div>{showAddress ? t("home.hide") : t("home.show")}</div>}
           </Tooltip>
         </div>
+
         <article className="flex flex-col overflow-hidden py-4">
           <h6 className="text-sm text-gray-200">
             {`${t("home.webui")} (${t("home.tor")})`}
@@ -103,8 +105,10 @@ export const ConnectionCard: FC = () => {
               </Tooltip>
             </div>
           )}
+
           {!torAddress && <div>{t("home.not_available")}</div>}
         </article>
+
         <article className="flex flex-col overflow-hidden py-4">
           <h6 className="text-sm text-gray-200">
             {`${t("home.webui")} (${t("home.ssh")})`}
@@ -135,6 +139,7 @@ export const ConnectionCard: FC = () => {
             </Tooltip>
           </div>
         </article>
+
         {nodeId && (
           <article className="flex flex-col overflow-hidden py-4">
             <h6 className="text-sm text-gray-200">{t("home.node_id")}</h6>
diff --git a/src/pages/Home/HardwareCard.tsx b/src/pages/Home/HardwareCard.tsx
index 4757250f..815ab619 100644
--- a/src/pages/Home/HardwareCard.tsx
+++ b/src/pages/Home/HardwareCard.tsx
@@ -1,5 +1,5 @@
-import LoadingBox from "@/components/LoadingBox";
 import { SSEContext } from "@/context/sse-context";
+import { Spinner } from "@nextui-org/react";
 import { FC, useContext } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -15,8 +15,13 @@ export const HardwareCard: FC = () => {
 
   if (!hardwareInfo) {
     return (
-      <div className="h-full w-1/2">
-        <LoadingBox />
+      <div className="bd-card mt-8 w-full transition-colors lg:ml-2 lg:mt-0 lg:w-1/2">
+        <h5 className="flex items-center text-lg font-bold">
+          {t("hardware.header")}
+        </h5>
+        <article className="flex flex-row overflow-hidden py-4">
+          <Spinner size="lg" />
+        </article>
       </div>
     );
   }
diff --git a/src/pages/Home/LightningCard.tsx b/src/pages/Home/LightningCard.tsx
index b814f98b..6925b5e4 100644
--- a/src/pages/Home/LightningCard.tsx
+++ b/src/pages/Home/LightningCard.tsx
@@ -1,8 +1,8 @@
-import LoadingBox from "@/components/LoadingBox";
 import { AppContext, Unit } from "@/context/app-context";
 import { SSEContext } from "@/context/sse-context";
 import { checkPropsUndefined } from "@/utils";
 import { convertMSatToBtc, convertToString } from "@/utils/format";
+import { Spinner } from "@nextui-org/react";
 import { FC, useContext } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -27,7 +27,14 @@ export const LightningCard: FC = () => {
   } = balance;
 
   if (checkPropsUndefined({ lnInfo, balance })) {
-    return <LoadingBox />;
+    return (
+      <div className="h-full">
+        <section className="bd-card">
+          <h2 className="text-lg font-bold">{t("home.lightning")}</h2>
+          <Spinner size="lg" />
+        </section>
+      </div>
+    );
   }
 
   // remove 'commit=...' from version string if exists
diff --git a/src/pages/Home/ListChannelModal/Channel.tsx b/src/pages/Home/ListChannelModal/Channel.tsx
index 1c3768a6..992371ba 100644
--- a/src/pages/Home/ListChannelModal/Channel.tsx
+++ b/src/pages/Home/ListChannelModal/Channel.tsx
@@ -90,6 +90,8 @@ const Channel: FC<Props> = ({
             >
               {t("home.close_channel")}
             </button>
+
+            {/*TODO should be confirm modal*/}
             {confirm && (
               <div className="flex flex-col justify-center gap-4">
                 <span>{t("home.confirm_channel_close")}</span>

From e4947696a8d2d077e61584360161493bae3428d7 Mon Sep 17 00:00:00 2001
From: escapedcat <github@htmlcss.de>
Date: Sun, 10 Nov 2024 20:29:58 +0100
Subject: [PATCH 5/5] refactor: switch spinnerbutton and spinner for nextui
 components (#792)

---
 .../ButtonSpinner/ButtonSpinner.css           | 146 ------------------
 .../ButtonSpinner/ButtonSpinner.tsx           |  24 ---
 .../ButtonWithSpinner/ButtonWithSpinner.tsx   |  35 -----
 src/components/LoadingBox.tsx                 |  12 --
 src/layouts/LoadingScreen.tsx                 |   4 +-
 src/layouts/PageLoadingScreen.tsx             |   4 +-
 src/layouts/SkeletonLoadingScreen.tsx         |   4 +-
 src/pages/Home/ListChannelModal/Channel.tsx   |  29 ++--
 8 files changed, 22 insertions(+), 236 deletions(-)
 delete mode 100644 src/components/ButtonWithSpinner/ButtonSpinner/ButtonSpinner.css
 delete mode 100644 src/components/ButtonWithSpinner/ButtonSpinner/ButtonSpinner.tsx
 delete mode 100644 src/components/ButtonWithSpinner/ButtonWithSpinner.tsx
 delete mode 100644 src/components/LoadingBox.tsx

diff --git a/src/components/ButtonWithSpinner/ButtonSpinner/ButtonSpinner.css b/src/components/ButtonWithSpinner/ButtonSpinner/ButtonSpinner.css
deleted file mode 100644
index 2080d076..00000000
--- a/src/components/ButtonWithSpinner/ButtonSpinner/ButtonSpinner.css
+++ /dev/null
@@ -1,146 +0,0 @@
-.sk-fading-circle {
-  width: 24px;
-  height: 24px;
-  position: relative;
-}
-
-.sk-fading-circle .sk-circle {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
-.sk-fading-circle .sk-circle:before {
-  content: "";
-  display: block;
-  margin: 0 auto;
-  width: 15%;
-  height: 15%;
-  background-color: white;
-  border-radius: 100%;
-  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
-  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
-}
-.sk-fading-circle .sk-circle2 {
-  -webkit-transform: rotate(30deg);
-  -ms-transform: rotate(30deg);
-  transform: rotate(30deg);
-}
-.sk-fading-circle .sk-circle3 {
-  -webkit-transform: rotate(60deg);
-  -ms-transform: rotate(60deg);
-  transform: rotate(60deg);
-}
-.sk-fading-circle .sk-circle4 {
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
-}
-.sk-fading-circle .sk-circle5 {
-  -webkit-transform: rotate(120deg);
-  -ms-transform: rotate(120deg);
-  transform: rotate(120deg);
-}
-.sk-fading-circle .sk-circle6 {
-  -webkit-transform: rotate(150deg);
-  -ms-transform: rotate(150deg);
-  transform: rotate(150deg);
-}
-.sk-fading-circle .sk-circle7 {
-  -webkit-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-}
-.sk-fading-circle .sk-circle8 {
-  -webkit-transform: rotate(210deg);
-  -ms-transform: rotate(210deg);
-  transform: rotate(210deg);
-}
-.sk-fading-circle .sk-circle9 {
-  -webkit-transform: rotate(240deg);
-  -ms-transform: rotate(240deg);
-  transform: rotate(240deg);
-}
-.sk-fading-circle .sk-circle10 {
-  -webkit-transform: rotate(270deg);
-  -ms-transform: rotate(270deg);
-  transform: rotate(270deg);
-}
-.sk-fading-circle .sk-circle11 {
-  -webkit-transform: rotate(300deg);
-  -ms-transform: rotate(300deg);
-  transform: rotate(300deg);
-}
-.sk-fading-circle .sk-circle12 {
-  -webkit-transform: rotate(330deg);
-  -ms-transform: rotate(330deg);
-  transform: rotate(330deg);
-}
-.sk-fading-circle .sk-circle2:before {
-  -webkit-animation-delay: -1.1s;
-  animation-delay: -1.1s;
-}
-.sk-fading-circle .sk-circle3:before {
-  -webkit-animation-delay: -1s;
-  animation-delay: -1s;
-}
-.sk-fading-circle .sk-circle4:before {
-  -webkit-animation-delay: -0.9s;
-  animation-delay: -0.9s;
-}
-.sk-fading-circle .sk-circle5:before {
-  -webkit-animation-delay: -0.8s;
-  animation-delay: -0.8s;
-}
-.sk-fading-circle .sk-circle6:before {
-  -webkit-animation-delay: -0.7s;
-  animation-delay: -0.7s;
-}
-.sk-fading-circle .sk-circle7:before {
-  -webkit-animation-delay: -0.6s;
-  animation-delay: -0.6s;
-}
-.sk-fading-circle .sk-circle8:before {
-  -webkit-animation-delay: -0.5s;
-  animation-delay: -0.5s;
-}
-.sk-fading-circle .sk-circle9:before {
-  -webkit-animation-delay: -0.4s;
-  animation-delay: -0.4s;
-}
-.sk-fading-circle .sk-circle10:before {
-  -webkit-animation-delay: -0.3s;
-  animation-delay: -0.3s;
-}
-.sk-fading-circle .sk-circle11:before {
-  -webkit-animation-delay: -0.2s;
-  animation-delay: -0.2s;
-}
-.sk-fading-circle .sk-circle12:before {
-  -webkit-animation-delay: -0.1s;
-  animation-delay: -0.1s;
-}
-
-@-webkit-keyframes sk-circleFadeDelay {
-  0%,
-  39%,
-  100% {
-    opacity: 0;
-  }
-  40% {
-    opacity: 1;
-  }
-}
-
-@keyframes sk-circleFadeDelay {
-  0%,
-  39%,
-  100% {
-    opacity: 0;
-  }
-  40% {
-    opacity: 1;
-  }
-}
diff --git a/src/components/ButtonWithSpinner/ButtonSpinner/ButtonSpinner.tsx b/src/components/ButtonWithSpinner/ButtonSpinner/ButtonSpinner.tsx
deleted file mode 100644
index a9dd6ebf..00000000
--- a/src/components/ButtonWithSpinner/ButtonSpinner/ButtonSpinner.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import "./ButtonSpinner.css";
-
-const ButtonSpinner = () => {
-  return (
-    <div className="mr-3 inline-block h-6 w-6">
-      <div className="sk-fading-circle">
-        <div className="sk-circle1 sk-circle"></div>
-        <div className="sk-circle2 sk-circle"></div>
-        <div className="sk-circle3 sk-circle"></div>
-        <div className="sk-circle4 sk-circle"></div>
-        <div className="sk-circle5 sk-circle"></div>
-        <div className="sk-circle6 sk-circle"></div>
-        <div className="sk-circle7 sk-circle"></div>
-        <div className="sk-circle8 sk-circle"></div>
-        <div className="sk-circle9 sk-circle"></div>
-        <div className="sk-circle10 sk-circle"></div>
-        <div className="sk-circle11 sk-circle"></div>
-        <div className="sk-circle12 sk-circle"></div>
-      </div>
-    </div>
-  );
-};
-
-export default ButtonSpinner;
diff --git a/src/components/ButtonWithSpinner/ButtonWithSpinner.tsx b/src/components/ButtonWithSpinner/ButtonWithSpinner.tsx
deleted file mode 100644
index 544e6ecd..00000000
--- a/src/components/ButtonWithSpinner/ButtonWithSpinner.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import ButtonSpinner from "./ButtonSpinner/ButtonSpinner";
-import type { ButtonHTMLAttributes, FC, ReactElement } from "react";
-
-type Props = {
-  className?: string;
-  loading?: boolean;
-  icon?: ReactElement;
-} & ButtonHTMLAttributes<unknown>;
-
-const ButtonWithSpinner: FC<Props> = ({
-  className,
-  children,
-  loading,
-  disabled,
-  onClick,
-  icon,
-  type,
-}) => {
-  return (
-    <button
-      type={type}
-      onClick={onClick}
-      className={className}
-      disabled={disabled || loading}
-    >
-      <div className="flex items-center justify-center">
-        {loading && <ButtonSpinner />}
-        {!loading && icon}
-        {children}
-      </div>
-    </button>
-  );
-};
-
-export default ButtonWithSpinner;
diff --git a/src/components/LoadingBox.tsx b/src/components/LoadingBox.tsx
deleted file mode 100644
index 45b1e770..00000000
--- a/src/components/LoadingBox.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import LoadingSpinner from "./LoadingSpinner/LoadingSpinner";
-import type { FC } from "react";
-
-export const LoadingBox: FC = () => (
-  <div className="h-full p-5">
-    <div className="bd-card flex items-center justify-center">
-      <LoadingSpinner />
-    </div>
-  </div>
-);
-
-export default LoadingBox;
diff --git a/src/layouts/LoadingScreen.tsx b/src/layouts/LoadingScreen.tsx
index 9b89c608..1d562ba7 100644
--- a/src/layouts/LoadingScreen.tsx
+++ b/src/layouts/LoadingScreen.tsx
@@ -1,12 +1,12 @@
-import LoadingSpinner from "../components/LoadingSpinner/LoadingSpinner";
 import RaspiBlitzLogoDark from "@/assets/RaspiBlitz_Logo_Main_Negative.svg?react";
+import { Spinner } from "@nextui-org/react";
 
 // Loading Screen for the initial loading of the app
 export default function LoadingScreen() {
   return (
     <main className="flex h-screen w-screen flex-col items-center justify-center bg-gray-700">
       <RaspiBlitzLogoDark className="mb-5 h-12" />
-      <LoadingSpinner color="text-yellow-500" />
+      <Spinner size="lg" />
     </main>
   );
 }
diff --git a/src/layouts/PageLoadingScreen.tsx b/src/layouts/PageLoadingScreen.tsx
index 19ec938d..8c07309a 100644
--- a/src/layouts/PageLoadingScreen.tsx
+++ b/src/layouts/PageLoadingScreen.tsx
@@ -1,4 +1,4 @@
-import LoadingSpinner from "../components/LoadingSpinner/LoadingSpinner";
+import { Spinner } from "@nextui-org/react";
 import { FC } from "react";
 
 // Loading Screen where sidebar is visible and usable
@@ -8,7 +8,7 @@ const PageLoadingScreen: FC = () => {
       className={`content-container page-container bg-gray-700 p-5 text-white transition-colors lg:pb-8 lg:pr-8 lg:pt-8`}
     >
       <section className="content-container flex items-center justify-center">
-        <LoadingSpinner color="text-yellow-500" />
+        <Spinner size="lg" />
       </section>
     </main>
   );
diff --git a/src/layouts/SkeletonLoadingScreen.tsx b/src/layouts/SkeletonLoadingScreen.tsx
index b552d66a..d770cefa 100644
--- a/src/layouts/SkeletonLoadingScreen.tsx
+++ b/src/layouts/SkeletonLoadingScreen.tsx
@@ -1,4 +1,4 @@
-import LoadingSpinner from "@/components/LoadingSpinner/LoadingSpinner";
+import { Spinner } from "@nextui-org/react";
 
 // Loading Screen when sidebar is visible but not usable
 export default function SkeletonLoadingScreen() {
@@ -7,7 +7,7 @@ export default function SkeletonLoadingScreen() {
       <header className="fixed top-0 z-10 mx-auto flex h-16 w-full items-center justify-between border-b border-gray-300 bg-gray-800 px-8 text-gray-300 shadow-md transition-colors"></header>
       <nav className="content-container fixed mb-16 hidden w-full flex-col justify-between bg-gray-800 px-2 pt-8 shadow-lg transition-colors md:flex md:w-2/12"></nav>
       <main className="content-container page-container flex items-center justify-center bg-gray-700">
-        <LoadingSpinner color="text-yellow-500" />
+        <Spinner size="lg" />
       </main>
     </>
   );
diff --git a/src/pages/Home/ListChannelModal/Channel.tsx b/src/pages/Home/ListChannelModal/Channel.tsx
index 992371ba..3cdc0829 100644
--- a/src/pages/Home/ListChannelModal/Channel.tsx
+++ b/src/pages/Home/ListChannelModal/Channel.tsx
@@ -1,8 +1,8 @@
-import ButtonWithSpinner from "@/components/ButtonWithSpinner/ButtonWithSpinner";
 import { AppContext, Unit } from "@/context/app-context";
 import { LightningChannel } from "@/models/lightning-channel";
 import { convertSatToBtc, convertToString } from "@/utils/format";
 import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
+import { Button } from "@nextui-org/react";
 import { FC, useContext, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -54,6 +54,7 @@ const Channel: FC<Props> = ({
         {showDetails && <ChevronUpIcon className="h-6 w-6" />}
         {!showDetails && <ChevronDownIcon className="h-6 w-6" />}
       </div>
+
       {showDetails && (
         <section className="flex flex-col gap-4 py-4">
           <article className="flex flex-col items-center justify-center md:flex-row md:justify-around">
@@ -82,38 +83,40 @@ const Channel: FC<Props> = ({
               </p>
             </div>
           </article>
+
           <article>
-            <button
-              className="bd-button mb-3 p-2"
-              disabled={confirm}
+            <Button
+              color="primary"
+              isDisabled={confirm}
               onClick={() => setConfirm(true)}
             >
               {t("home.close_channel")}
-            </button>
+            </Button>
 
             {/*TODO should be confirm modal*/}
             {confirm && (
               <div className="flex flex-col justify-center gap-4">
                 <span>{t("home.confirm_channel_close")}</span>
+
                 <div className="flex items-center justify-center gap-2">
                   <label htmlFor="forceClose">{t("home.force_close")}</label>
                   <input id="forceClose" type="checkbox" ref={forceCloseEl} />
                 </div>
+
                 <div className="flex justify-center gap-4">
-                  <button
+                  <Button
                     onClick={() => setConfirm(false)}
-                    disabled={isLoading}
-                    className="bd-button-red p-2"
+                    isDisabled={isLoading}
                   >
                     {t("setup.cancel")}
-                  </button>
-                  <ButtonWithSpinner
-                    loading={isLoading}
-                    className="bd-button p-2"
+                  </Button>
+                  <Button
+                    color="primary"
+                    isLoading={isLoading}
                     onClick={closeChannelHandler}
                   >
                     {t("setup.yes")}
-                  </ButtonWithSpinner>
+                  </Button>
                 </div>
               </div>
             )}