refactor: use nextui spinner (#791)

* refactor(home): use nextui buttons for txCard

* refactor(home): use nextui alert for txCard

* refactor(home): use nextui spinner for txCard

* refactor: use nextui spinner

* refactor: switch spinnerbutton and spinner for nextui components (#792)

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

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>
   );

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>
     </>
   );

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>