updated the loading for the getFirekirin

src/app/(dashboard)/(user)/(privateUser)/account/AccountTab.tsx

@@ -6,7 +6,7 @@ import ResetPasswordForm from '@/components/pages/auth/resetPassword/ResetPasswo
 import EditUserProfile from '@/components/pages/dashboard/userDashboard/account/profile/editProfile';
 import EditUserWallet from '@/components/pages/dashboard/userDashboard/account/profile/editUserWallet';
 import { useAppSelector } from '@/hooks/hook';
-import { useGetUserGameBalanceQuery } from '@/services/userApi';
+import { useGetUserGameBalanceQuery } from '@/services/transaction';
 import React from 'react';
 
 type profileTabProps = "account_detail" | "wallet_information" | "change_password"

src/components/organism/Header/UserHeader/UserCoinCard.tsx

@@ -2,7 +2,7 @@
 import { useAppSelector } from '@/hooks/hook'
 import GoldCoinIcon from '@/icons/GoldCoinIcon'
 import SilverCoinIcon from '@/icons/SilverCoinIcon'
-import { useGetUserBalanceQuery } from '@/services/userApi'
+import { useGetUserBalanceQuery } from '@/services/transaction'
 import { UserBalance } from '@/types/user'
 import { Box, ClickAwayListener, Fade, IconButton, Paper, Popper } from '@mui/material'
 import { CloseCircle, Refresh } from '@wandersonalwes/iconsax-react'
@@ -43,7 +43,9 @@ export default function UserCoinCard() {
                 >
                     <GoldCoinIcon />
                     <div className="coins">
-                        <strong className="text-[12px] leading-4 font-[600] text-[#FBA027] block">{newBalance?.gcBalnce || 0}</strong>
+                        {isLoading || isFetching ? <IconButton>
+                            <Refresh size={10} className={isLoading || isFetching ? 'animate-spin' : ''} />
+                        </IconButton> : <strong className="text-[12px] leading-4 font-[600] text-[#FBA027] block">{newBalance?.gcBalnce || 0}</strong>}
                         <span className="text-[9px] mt-[-2px] hidden md:block">Gold Coins</span>
                     </div>
                 </Box>
@@ -102,7 +104,9 @@ export default function UserCoinCard() {
                 >
                     <SilverCoinIcon />
                     <div className="coins">
-                        <strong className="text-[12px] leading-4 font-[600] text-[#93E0D8] block">{sweepsCoin.providers.length ? sweepsCoin.providers.reduce((acc, item) => acc + Number(item.balance), 0).toFixed(2) : 0}</strong>
+                        {isLoading || isFetching ? <IconButton>
+                            <Refresh size={10} className={isLoading || isFetching ? 'animate-spin' : ''} />
+                        </IconButton> : <strong className="text-[12px] leading-4 font-[600] text-[#93E0D8] block">{sweepsCoin.providers.length ? sweepsCoin.providers.reduce((acc, item) => acc + Number(item.balance), 0).toFixed(2) : 0}</strong>}
                         <span className="text-[9px] mt-[-2px]  hidden md:block">Sweeps Coins</span>
                     </div>
                 </Box>

src/components/pages/dashboard/userDashboard/gameCredentials/CredentialsCard.tsx

@@ -3,7 +3,7 @@
 import GlassWrapper from "@/components/molecules/GlassWrapper";
 import { useAppDispatch, useAppSelector } from "@/hooks/hook";
 import TapIcon from "@/icons/Tap";
-import { useChangeUserGamePasswordMutation, useGetUserBalanceBySlugQuery } from "@/services/userApi";
+import { useChangeUserGamePasswordMutation } from "@/services/userApi";
 import { openPasswordDialog } from "@/slice/updatePasswordSlice";
 import { CredentialsProps } from "@/types/game";
 import { CircularProgress } from "@mui/material";
@@ -16,6 +16,7 @@ import BalanceRefresh from "./BalanceRefresh";
 import { CardPasswordField } from "./CardPasswordHandler";
 import CopyToClipboard from "./CopyToClipboard";
 import ResetPasswordDialog from "./ResetPasswordDialog";
+import { useGetUserBalanceBySlugQuery } from "@/services/transaction";
 
 export default function CredentialsCard({ cred }: { cred: CredentialsProps }) {
     const {

src/services/transaction.ts

 import { TransactionStatusProps } from "@/components/pages/dashboard/adminDashboard/transaction/TransactionTable";
+import { setBalance, updateBalancePerProvider } from "@/slice/userBalanceSlice";
 import { GlobalResponse, QueryParams } from "@/types/config";
 import { DepositListProps, DepositProps, DepositResponseProps, MasspayPaymentFields, MasspayPaymentMethods } from "@/types/transaction";
+import { UserBalanceResponse } from "@/types/user";
 import { createApi } from "@reduxjs/toolkit/query/react";
 import { baseQuery } from "./baseQuery";
+import { SinlgePlayerResponseProps } from "@/types/player";
 
 // Define proper request/response types
 interface SubmitMassPayRequest {
@@ -31,6 +34,43 @@ export const transactionApi = createApi({
     baseQuery: baseQuery,
     tagTypes: ["Deposit", "Withdrawl"],
     endpoints: (builder) => ({
+        getUserBalance: builder.query<UserBalanceResponse, void>({
+            query: () => ({
+                url: "/api/get-balance",
+                method: "GET",
+            }),
+
+            async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+                try {
+                    const { data } = await queryFulfilled;
+                    dispatch(setBalance(data?.data));
+                } catch { }
+            },
+            providesTags: ['Deposit', 'Withdrawl']
+        }),
+
+        getUserBalanceBySlug: builder.query<{ data: { provider: string; balance: number, flag: string, has_changed_password: boolean } }, { slug: string }>({
+            query: ({ slug }) => ({
+                url: `/api/balance/${slug}`,
+                method: "GET"
+            }),
+            async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+                try {
+                    const { data } = await queryFulfilled;
+                    dispatch(updateBalancePerProvider({ balance: data?.data.balance, provider: arg.slug }));
+                } catch { }
+            },
+            providesTags: ['Deposit', 'Withdrawl']
+
+        }),
+        getUserGameBalance: builder.query<SinlgePlayerResponseProps, void>({
+            query: () => ({
+                url: "/api/detail/get-balance",
+                method: "GET"
+            }),
+            providesTags: ['Deposit', 'Withdrawl']
+
+        }),
         deposit: builder.mutation<DepositResponseProps, DepositProps>({
             query: ({ id, amount, type, payment_token }) => ({
                 url: `/api/payment/${id}`,
@@ -134,5 +174,8 @@ export const {
     useGetAllTransactionQuery,
     useGetMassPayPaymentFieldsMutation,
     useGetMassPayPaymentMethodsQuery,
-    useSubmitMassPayPaymentFieldsMutation
+    useSubmitMassPayPaymentFieldsMutation,
+    useGetUserBalanceQuery,
+    useGetUserBalanceBySlugQuery,
+    useGetUserGameBalanceQuery,
 } = transactionApi;
\ No newline at end of file

src/services/userApi.ts

-import { setBalance, updateBalancePerProvider } from "@/slice/userBalanceSlice";
 import { GlobalResponse } from "@/types/config";
 import { CredentialsResponseProps } from "@/types/game";
 import { SinlgePlayerResponseProps, WalletProps } from "@/types/player";
-import { UserBalanceResponse } from "@/types/user";
 import { createApi } from "@reduxjs/toolkit/query/react";
 import { baseQuery } from "./baseQuery";
 
@@ -27,42 +25,8 @@ export const userApi = createApi({
             }),
             invalidatesTags: ['user', "wallet"]
         }),
-        getUserBalance: builder.query<UserBalanceResponse, void>({
-            query: () => ({
-                url: "/api/get-balance",
-                method: "GET",
-            }),
-
-            async onQueryStarted(arg, { dispatch, queryFulfilled }) {
-                try {
-                    const { data } = await queryFulfilled;
-                    dispatch(setBalance(data?.data));
-                } catch { }
-            },
 
-            providesTags: ['user']
-        }),
 
-        getUserBalanceBySlug: builder.query<{ data: { provider: string; balance: number, flag: string, has_changed_password: boolean } }, { slug: string }>({
-            query: ({ slug }) => ({
-                url: `/api/balance/${slug}`,
-                method: "GET"
-            }),
-            async onQueryStarted(arg, { dispatch, queryFulfilled }) {
-                try {
-                    const { data } = await queryFulfilled;
-                    dispatch(updateBalancePerProvider({ balance: data?.data.balance, provider: arg.slug }));
-                } catch { }
-            },
-            providesTags: ['user']
-        }),
-        getUserGameBalance: builder.query<SinlgePlayerResponseProps, void>({
-            query: () => ({
-                url: "/api/detail/get-balance",
-                method: "GET"
-            }),
-            providesTags: ['user']
-        }),
         getUserGameCredentials: builder.query<CredentialsResponseProps, void>({
             query: () => ({
                 url: `/api/credentials`,
@@ -103,4 +67,4 @@ export const userApi = createApi({
 
 })
 
-export const { useAddUserWalletMutation, useUpdateUserProfileMutation, useGetUserBalanceQuery, useGetUserBalanceBySlugQuery, useGetUserGameBalanceQuery, useGetUserGameCredentialsQuery, useChangeUserGamePasswordMutation, useUpdateUserGamePasswordMutation, useGetGamesPasswordStatusQuery } = userApi;
+export const { useAddUserWalletMutation, useUpdateUserProfileMutation, useGetUserGameCredentialsQuery, useChangeUserGamePasswordMutation, useUpdateUserGamePasswordMutation, useGetGamesPasswordStatusQuery } = userApi;
\ No newline at end of file