A personal media tracker built on the AT Protocol
opnshelf.xyz
fix: improve query invalidation and loading state handling in ShelfPage for better user experience
+19
-4
+19
-4
apps/web/src/routes/shelf.tsx
+19
-4
apps/web/src/routes/shelf.tsx
···
1
1
import {
2
2
authControllerMeOptions,
3
3
moviesControllerGetUserMoviesOptions,
4
+
moviesControllerGetUserMoviesQueryKey,
4
5
moviesControllerUnmarkWatchedMutation,
5
6
} from "@opnshelf/api";
6
7
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
7
8
import { createFileRoute, Link } from "@tanstack/react-router";
8
-
import { BookOpen, LogIn, Trash2 } from "lucide-react";
9
+
import { BookOpen, Loader2, LogIn, Trash2 } from "lucide-react";
9
10
10
11
export const Route = createFileRoute("/shelf")({
11
12
component: ShelfPage,
···
33
34
const unmarkMutation = useMutation({
34
35
...moviesControllerUnmarkWatchedMutation(),
35
36
onSuccess: () => {
36
-
queryClient.invalidateQueries({ queryKey: ["shelf"] });
37
+
queryClient.invalidateQueries({
38
+
queryKey: moviesControllerGetUserMoviesQueryKey({
39
+
path: { userDid: user?.did || "" },
40
+
}),
41
+
});
37
42
},
38
43
});
39
44
···
114
119
path: { movieId: tracked.movieId },
115
120
})
116
121
}
117
-
disabled={unmarkMutation.isPending}
122
+
disabled={
123
+
unmarkMutation.isPending &&
124
+
unmarkMutation.variables?.path?.movieId ===
125
+
tracked.movieId
126
+
}
118
127
className="absolute top-2 right-2 p-2 bg-red-600 hover:bg-red-700 rounded-full [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover:opacity-100 transition-opacity disabled:opacity-50"
119
128
title="Remove from shelf"
120
129
>
121
-
<Trash2 className="w-4 h-4" />
130
+
{unmarkMutation.isPending &&
131
+
unmarkMutation.variables?.path?.movieId ===
132
+
tracked.movieId ? (
133
+
<Loader2 className="w-4 h-4 animate-spin" />
134
+
) : (
135
+
<Trash2 className="w-4 h-4" />
136
+
)}
122
137
</button>
123
138
</div>
124
139
<h3 className="font-semibold text-sm line-clamp-2 mb-1">