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] 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>
             )}