diff --git a/web/src/components/quest-table.tsx b/web/src/components/quest-table.tsx index e5db64f..8fdc7a0 100644 --- a/web/src/components/quest-table.tsx +++ b/web/src/components/quest-table.tsx @@ -16,7 +16,8 @@ interface QuestListItem { interface QuestTableProps { quests: QuestListItem[]; - isLoading: boolean; + isInitialLoading: boolean; + isRefreshing: boolean; onRefresh?: () => void; } @@ -211,14 +212,16 @@ function QuestTableContent({ quests }: { quests: QuestListItem[] }) { ); } -export function QuestTable({ quests, isLoading, onRefresh }: QuestTableProps) { +export function QuestTable({ quests, isInitialLoading, isRefreshing, onRefresh }: QuestTableProps) { + const showSkeleton = isInitialLoading && quests.length === 0; + return (
Quest Inventory
- {isLoading ? ( + {showSkeleton ? ( Loading... @@ -229,10 +232,10 @@ export function QuestTable({ quests, isLoading, onRefresh }: QuestTableProps) { )}
- {isLoading ? ( + {showSkeleton ? ( ) : ( diff --git a/web/src/pages/AdminQuests.tsx b/web/src/pages/AdminQuests.tsx index ca93bbe..880bbd8 100644 --- a/web/src/pages/AdminQuests.tsx +++ b/web/src/pages/AdminQuests.tsx @@ -15,12 +15,16 @@ interface QuestListItem { export function AdminQuests() { const [quests, setQuests] = React.useState([]); - const [isLoading, setIsLoading] = React.useState(true); - const [refreshKey, setRefreshKey] = React.useState(0); + const [isInitialLoading, setIsInitialLoading] = React.useState(true); + const [isRefreshing, setIsRefreshing] = React.useState(false); const [lastCreatedQuestId, setLastCreatedQuestId] = React.useState(null); - const fetchQuests = React.useCallback(async () => { - setIsLoading(true); + const fetchQuests = React.useCallback(async (isRefresh = false) => { + if (isRefresh) { + setIsRefreshing(true); + } else { + setIsInitialLoading(true); + } try { const response = await fetch("/api/quests"); if (!response.ok) { @@ -36,12 +40,13 @@ export function AdminQuests() { description: error instanceof Error ? error.message : "Unknown error", }); } finally { - setIsLoading(false); + setIsInitialLoading(false); + setIsRefreshing(false); } }, []); React.useEffect(() => { - fetchQuests(); + fetchQuests(false); }, [fetchQuests]); React.useEffect(() => { @@ -59,7 +64,7 @@ export function AdminQuests() { }, [lastCreatedQuestId, quests]); const handleQuestCreated = () => { - fetchQuests(); + fetchQuests(true); toast.success("Quest list updated", { description: "The quest inventory has been refreshed.", }); @@ -76,8 +81,9 @@ export function AdminQuests() {
fetchQuests(true)} />