add some table loading spinner

This commit is contained in:
pa
2026-01-19 17:25:40 +09:00
committed by Natsumi
parent 39e9631812
commit da9cb3dab6
3 changed files with 12 additions and 5 deletions

View File

@@ -5,7 +5,7 @@
</div> </div>
<div class="rounded-md border"> <div class="rounded-md border">
<div class="max-w-full overflow-auto" :style="tableStyle"> <div class="max-w-full overflow-auto relative" :style="tableStyle">
<Table :class="tableClassValue" :style="tableElementStyle"> <Table :class="tableClassValue" :style="tableElementStyle">
<colgroup> <colgroup>
<col v-for="col in table.getVisibleLeafColumns()" :key="col.id" :style="getColStyle(col)" /> <col v-for="col in table.getVisibleLeafColumns()" :key="col.id" :style="getColStyle(col)" />
@@ -67,6 +67,9 @@
</TableRow> </TableRow>
</TableBody> </TableBody>
</Table> </Table>
<div v-if="loading" class="absolute inset-0 z-20 flex items-center justify-center bg-background/60">
<Spinner class="text-2xl" />
</div>
</div> </div>
</div> </div>
@@ -114,7 +117,10 @@
<script setup> <script setup>
import { FlexRender } from '@tanstack/vue-table'; import { FlexRender } from '@tanstack/vue-table';
import { Spinner } from '@/components/ui/spinner';
import { computed } from 'vue'; import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useAppearanceSettingsStore } from '@/stores/';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { import {
@@ -127,8 +133,6 @@
} from '../pagination'; } from '../pagination';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
import { useAppearanceSettingsStore } from '@/stores/';
import { storeToRefs } from 'pinia';
const appearanceSettingsStore = useAppearanceSettingsStore(); const appearanceSettingsStore = useAppearanceSettingsStore();
const { isDataTableStriped } = storeToRefs(appearanceSettingsStore); const { isDataTableStriped } = storeToRefs(appearanceSettingsStore);

View File

@@ -89,7 +89,6 @@ export const useFriendStore = defineStore('Friend', () => {
!(filter.value && row.type === 'Unfriend') !(filter.value && row.type === 'Unfriend')
} }
], ],
pageSize: 20,
pageSizeLinked: true pageSizeLinked: true
}); });

View File

@@ -73,7 +73,11 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
onPlayerJoining.value = newOnPlayerJoining; onPlayerJoining.value = newOnPlayerJoining;
sharedFeedData.value = sharedFeedData.value.filter( sharedFeedData.value = sharedFeedData.value.filter(
(ctx) => ctx.type !== 'OnPlayerJoining' && !ctx.isTraveling (ctx) =>
!(
ctx.type === 'OnPlayerJoining' ||
(ctx.type === 'GPS' && ctx.isTraveling)
)
); );
sharedFeedData.value.unshift(...onPlayerJoining.value); sharedFeedData.value.unshift(...onPlayerJoining.value);
if (sharedFeedData.value.length > maxEntries) { if (sharedFeedData.value.length > maxEntries) {