Changed loading animation

src/components/Navbar.tsx

@@ -53,7 +53,7 @@ const Navbar: React.FC<NavbarProps> = ({ title }) => {
 
       {sessionStatus === "loading" ? (
         <div className="flex items-center justify-center">
-          <span className="loading loading-spinner loading-lg"></span>
+          <span className="loading loading-dots loading-lg"></span>
         </div>
       ) : (
         navigationMenu()

src/components/RoomList.tsx

@@ -137,7 +137,7 @@ const RoomList: React.FC = () => {
 
       {roomsFromDb === undefined && (
         <div className="flex items-center justify-center">
-          <span className="loading loading-spinner loading-lg"></span>
+          <span className="loading loading-dots loading-lg"></span>
         </div>
       )}
     </div>

src/pages/_app.tsx

@@ -43,7 +43,7 @@ const MyApp: AppType<{ session: Session | null }> = ({
         <Navbar title="Sprint Padawan" />
         <div className="flex flex-row items-center justify-center min-h-[calc(100%-114px)]">
           {pageLoading ? (
-            <span className="loading loading-spinner loading-lg"></span>
+            <span className="loading loading-dots loading-lg"></span>
           ) : (
             <Component {...pageProps} />
           )}

src/pages/admin/index.tsx

@@ -148,7 +148,7 @@ const AdminBody: React.FC = () => {
           <div className="stat-title">Users</div>
           <div className="stat-value">
             {usersCountLoading || usersCountFetching ? (
-              <span className="loading loading-spinner loading-lg"></span>
+              <span className="loading loading-dots loading-lg"></span>
             ) : (
               <>{usersCount ? usersCount : "0"}</>
             )}
@@ -159,7 +159,7 @@ const AdminBody: React.FC = () => {
           <div className="stat-title">Rooms</div>
           <div className="stat-value">
             {roomsCountLoading || roomsCountFetching ? (
-              <span className="loading loading-spinner loading-lg"></span>
+              <span className="loading loading-dots loading-lg"></span>
             ) : (
               <>{roomsCount ? roomsCount : "0"}</>
             )}
@@ -170,7 +170,7 @@ const AdminBody: React.FC = () => {
           <div className="stat-title">Votes</div>
           <div className="stat-value">
             {votesCountLoading || votesCountFetching ? (
-              <span className="loading loading-spinner loading-lg"></span>
+              <span className="loading loading-dots loading-lg"></span>
             ) : (
               <>{votesCount ? votesCount : "0"}</>
             )}
@@ -194,7 +194,7 @@ const AdminBody: React.FC = () => {
           <h2 className="card-title">Users:</h2>
 
           {usersLoading || usersFetching ? (
-            <span className="loading loading-spinner loading-lg"></span>
+            <span className="loading loading-dots loading-lg"></span>
           ) : (
             <div className="overflow-x-scroll">
               <table className="table text-center">

src/pages/profile/index.tsx

@@ -127,7 +127,7 @@ const ProfileBody: React.FC = () => {
 
             {providersLoading ? (
               <div className="mx-auto">
-                <span className="loading loading-spinner loading-lg"></span>
+                <span className="loading loading-dots loading-lg"></span>{" "}
               </div>
             ) : (
               <div className="mx-auto">

src/pages/room/[id].tsx

@@ -247,7 +247,7 @@ const RoomBody: React.FC = () => {
   if (roomFromDb === undefined) {
     return (
       <div className="flex flex-col items-center justify-center text-center">
-        <span className="loading loading-spinner loading-lg"></span>
+        <span className="loading loading-dots loading-lg"></span>{" "}
       </div>
     );
     // Room has been loaded