diff --git a/dashboard/src/components/entity-table/table.tsx b/dashboard/src/components/entity-table/table.tsx
@@ -13,7 +13,7 @@ import {
import { useTranslation } from "react-i18next"
import { useEntityTableContext } from "./entity-table-provider"
-import { LoaderCircle } from "lucide-react"
+import { LoaderIcon } from "lucide-react"
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[]
@@ -50,7 +50,7 @@ export function EntityDataTable<TData, TValue>({
{isLoading ? (
<TableRow className="w-full">
<TableCell colSpan={columns.length} className="h-24 text-center">
- <LoaderCircle className="w-5 h-5 animate-spin text-primary" />
+ <LoaderIcon className="w-5 h-5 animate-spin text-primary" />
</TableCell>
</TableRow>
) : (
diff --git a/dashboard/src/features/hosts/tables/inbound-hosts/index.tsx b/dashboard/src/features/hosts/tables/inbound-hosts/index.tsx
@@ -16,7 +16,7 @@ import { InboundNotSelectedAlertDialog } from './inbound-not-selected-alert-dial
export const InboundHostsTable = () => {
const { data: inbounds } = useInboundsQuery()
const [selectedInbound, setSelectedInbound] = useState<string | undefined>(inbounds[0]?.id !== undefined ? String(inbounds[0].id) : undefined)
- const { data } = useHostsQuery(Number(selectedInbound))
+ const { data, isLoading } = useHostsQuery(Number(selectedInbound))
const [mutationDialogOpen, setMutationDialogOpen] = useDialog();
const [deleteDialogOpen, setDeleteDialogOpen] = useDialog();
@@ -79,6 +79,7 @@ export const InboundHostsTable = () => {
setSelectedInbound={setSelectedInbound}
onCreate={onCreate}
onOpen={onOpen}
+ isLoading={isLoading}
/>
</div>
)
diff --git a/dashboard/src/features/hosts/tables/inbound-hosts/table.tsx b/dashboard/src/features/hosts/tables/inbound-hosts/table.tsx
@@ -34,6 +34,7 @@ import { useState } from "react"
import { InboundType } from "@marzneshin/features/inbounds"
import { Server } from "lucide-react"
import { InboundOption } from "./inbound"
+import { LoaderIcon } from "lucide-react"
interface InboundHostsDataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[]
@@ -44,6 +45,7 @@ interface InboundHostsDataTableProps<TData, TValue> {
setSelectedInbound: (s: string) => void
onCreate?: () => void
onOpen?: (object: TData) => void
+ isLoading: boolean
}
export function InboundHostsDataTable<TData, TValue>({
@@ -55,6 +57,7 @@ export function InboundHostsDataTable<TData, TValue>({
inbounds,
selectedInbound,
setSelectedInbound,
+ isLoading,
}: InboundHostsDataTableProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([])
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
@@ -136,7 +139,7 @@ export function InboundHostsDataTable<TData, TValue>({
))}
</TableHeader>
<TableBody>
- {table.getRowModel().rows?.length ? (
+ {isLoading && <LoaderIcon className="w-5 h-5 animate-spin text-primary" />} {!isLoading && table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}