fix(panel): eliminate page collapse and scroll shifts during LuckPerms query reload

This commit is contained in:
Lemon-miaow committed 2026-07-04 00:29:19 +08:00
1 parent b7d8000eaf
commit e60784b5b2
1 file changed
+6 -6
+6 -6
View File
@@ -457,12 +457,12 @@ export function ServerLuckPerms() {
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="p-5 space-y-4"> <CardContent className="p-5 space-y-4">
{lpLoading ? ( {lpLoading && !lpInfo ? (
<div className="flex justify-center py-4"> <div className="flex justify-center py-4">
<Loader2 className="h-6 w-6 animate-spin text-primary" /> <Loader2 className="h-6 w-6 animate-spin text-primary" />
</div> </div>
) : ( ) : (
<> <div className={cn("space-y-4 transition-opacity", lpLoading && "opacity-60 pointer-events-none")}>
<div className="flex flex-wrap gap-1.5"> <div className="flex flex-wrap gap-1.5">
{lpInfo?.groups && lpInfo.groups.length > 0 ? ( {lpInfo?.groups && lpInfo.groups.length > 0 ? (
lpInfo.groups.map((group) => ( lpInfo.groups.map((group) => (
@@ -532,7 +532,7 @@ export function ServerLuckPerms() {
{t("luckperms_add_group_btn")} {t("luckperms_add_group_btn")}
</Button> </Button>
</div> </div>
</> </div>
)} )}
</CardContent> </CardContent>
</Card> </Card>
@@ -545,12 +545,12 @@ export function ServerLuckPerms() {
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="p-5 space-y-4"> <CardContent className="p-5 space-y-4">
{lpLoading ? ( {lpLoading && !lpInfo ? (
<div className="flex justify-center py-4"> <div className="flex justify-center py-4">
<Loader2 className="h-6 w-6 animate-spin text-primary" /> <Loader2 className="h-6 w-6 animate-spin text-primary" />
</div> </div>
) : ( ) : (
<> <div className={cn("space-y-4 transition-opacity", lpLoading && "opacity-60 pointer-events-none")}>
<div className="rounded-md border border-border bg-muted/10 overflow-hidden"> <div className="rounded-md border border-border bg-muted/10 overflow-hidden">
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="w-full text-left border-collapse text-xs"> <table className="w-full text-left border-collapse text-xs">
@@ -703,7 +703,7 @@ export function ServerLuckPerms() {
</Button> </Button>
</div> </div>
</form> </form>
</> </div>
)} )}
</CardContent> </CardContent>
</Card> </Card>