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

change spin animation on data grid loader

Browse Source
This commit is contained in:
Raja Oktafrianto
2025-04-23 16:29:26 +07:00
parent 257fb29740
commit 0ea561aebc
3 changed files with 19 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/data-grid/DataGridLoader.tsx
View File

@ -1,33 +1,15 @@
import React from 'react';
import { useDataGrid } from '.';
import { RefreshCw } from 'lucide-react';
export const DataGridLoader = () => {
const { props } = useDataGrid();
return (
<div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center gap-6 min-w-[160px] bg-card text-muted-foreground px-4 py-2 font-medium leading-none text-sm border shadow-sm rounded-md">
<div className="text-muted-foreground bg-card flex items-center gap-2 px-4 py-2 font-medium leading-none text-sm border shadow-sm rounded-md">
<svg
className="animate-spin -ml-1 h-5 w-5 text-muted-foreground flex-shrink-0"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="3"
></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
{props.messages?.loading}
<div className="fixed inset-0 bg-transparent flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
<div className="bg-card flex items-center border shadow-sm rounded-md">
<div className="flex flex-col items-center">
<RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
<span className="text-slate-500 font-medium">Refreshing data...</span>
</div>
</div>
</div>
);

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

@ -224,9 +224,11 @@ const ManageGroups = () => {
<div className="grid gap-5 lg:gap-7.5 mt-5 relative">
{isReloading && (
<div className="fixed inset-0 bg-transparent flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
<div className="flex flex-col items-center">
<RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
<span className="text-slate-500 font-medium">Refreshing data...</span>
<div className="bg-card flex items-center border shadow-sm rounded-md">
<div className="flex flex-col items-center">
<RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
<span className="text-slate-500 font-medium">Refreshing data...</span>
</div>
</div>
</div>
)}

12
src/pages/members/manage-members/ManageMembers.tsx
View File

@ -178,7 +178,7 @@ const ManageMembers = () => {
toast.success('Success Create Member. PIN sent to email');
}
} catch (error: any) {
if (error?.response?.data?.message) toast.error(error?.response?.data?.message)
if (error?.response?.data?.message) toast.error(error?.response?.data?.message);
else toast.error(error.message);
} finally {
setDialogOpen(false);
@ -239,10 +239,12 @@ const ManageMembers = () => {
<div className="grid gap-5 lg:gap-7.5 mt-5 relative">
{isReloading && (
<div className="absolute inset-0 bg-white/70 z-10 flex items-center justify-center">
<div className="flex flex-col items-center">
<RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
<span className="text-slate-500 font-medium">Refreshing data...</span>
<div className="fixed inset-0 bg-transparent flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
<div className="bg-card flex items-center border shadow-sm rounded-md">
<div className="flex flex-col items-center">
<RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
<span className="text-slate-500 font-medium">Refreshing data...</span>
</div>
</div>
</div>
)}