TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix loading animation in manage group

Browse Source
This commit is contained in:
Raja Oktafrianto
2025-04-28 14:48:20 +07:00
parent de0f4e594a
commit 254d168396
2 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/pages/groups/ManageGroups.tsx
View File

@ -24,7 +24,7 @@ import CloseIcon from '@mui/icons-material/Close';
import Divider from '@mui/material/Divider'; import Divider from '@mui/material/Divider';
import ConfirmDialog from '@/components/confirm'; import ConfirmDialog from '@/components/confirm';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { Container, DataGridProvider, LoaderTransparant } from '@/components'; import { Container, DataGridLoader, DataGridProvider, LoaderTransparant } from '@/components';
import { ListToolBar } from './ListToolbar'; import { ListToolBar } from './ListToolbar';
import { RefreshCw } from 'lucide-react'; import { RefreshCw } from 'lucide-react';
import { setgroups } from 'process'; import { setgroups } from 'process';
@ -54,16 +54,15 @@ const ManageGroups = () => {
const [isReloading, setIsReloading] = useState(false); const [isReloading, setIsReloading] = useState(false);
// const closeDialog = () => { // const closeDialog = () => {
// setIsDialogOpen(false); // setIsDialogOpen(false);
// setgroups(initGroup); // setgroups(initGroup);
// }; // };
useEffect(() => { useEffect(() => {
setLoading(true); fetchGroups();
fetchGroups();
setLoading(false);
}, []); }, []);
async function fetchGroups(): Promise<void> { async function fetchGroups(): Promise<void> {
setIsReloading(true);
try { try {
let groups = await axios.get(`${BASE_URL}/groups/list`, { let groups = await axios.get(`${BASE_URL}/groups/list`, {
params: { params: {
@ -88,7 +87,7 @@ const ManageGroups = () => {
alert(error.message); alert(error.message);
console.log(error); console.log(error);
} finally { } finally {
setLoading(false); // setLoading(false);
setIsReloading(false); setIsReloading(false);
} }
} }
@ -150,6 +149,7 @@ const ManageGroups = () => {
}; };
const handleYes = async () => { const handleYes = async () => {
setIsReloading(true);
try { try {
if (dialogType === 'create') { if (dialogType === 'create') {
await axios.post(`${BASE_URL}/groups/create`, { await axios.post(`${BASE_URL}/groups/create`, {
@ -223,14 +223,15 @@ const ManageGroups = () => {
<div className="grid gap-5 lg:gap-7.5 mt-5 relative"> <div className="grid gap-5 lg:gap-7.5 mt-5 relative">
{isReloading && ( {isReloading && (
<div className="fixed inset-0 bg-white/25 flex items-center justify-center z-50 text-muted-foreground px-4 py-2"> <DataGridLoader />
<div className="bg-card flex items-center border shadow-sm rounded-md"> // <div className="fixed inset-0 bg-white/25 flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
<div className="flex flex-col items-center"> // <div className="bg-card flex items-center border shadow-sm rounded-md">
<RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" /> // <div className="flex flex-col items-center">
<span className="text-slate-500 font-medium">Refreshing data...</span> // <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
</div> // <span className="text-slate-500 font-medium">Refreshing data...</span>
</div> // </div>
</div> // </div>
// </div>
)} )}
<DataGridProvider <DataGridProvider
data={dataGroup} data={dataGroup}

4
src/pages/notification/hooks/ManageNotificationContext.tsx
View File

@ -73,7 +73,7 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
}, },
id: 'send', id: 'send',
header: ({ column }) => <DataGridColumnHeader title="Send" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Send" column={column} />,
enableSorting: false, enableSorting: true,
enableHiding: false, enableHiding: false,
meta: { meta: {
headerClassName: 'w-[200px]' headerClassName: 'w-[200px]'
@ -86,7 +86,7 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
enableSorting: true, enableSorting: true,
enableHiding: false, enableHiding: false,
meta: { meta: {
headerClassName: 'w-[300px]' headerClassName: 'w-[350px]'
} }
}, },
{ {