idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 16:59:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

enhancement(web): filters list query loading animation (#1401)

Browse source 
* feat(web): filters list query loading animation

* refactor(filters): move loading spinner inside list

---------

Co-authored-by: ze0s <ze0s@riseup.net>
This commit is contained in:
martylukyy 2024-02-13 11:44:45 +01:00 • committed by GitHub
parent fdf450897b
commit 0174d743b1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 15 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

27
web/src/screens/filters/List.tsx
View file

@ -8,7 +8,6 @@ import { Link } from '@tanstack/react-router'
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import { Listbox, Menu, Transition } from "@headlessui/react"; import { Listbox, Menu, Transition } from "@headlessui/react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { FormikValues } from "formik";
import { import {
ArrowsRightLeftIcon, ArrowsRightLeftIcon,
ArrowUpOnSquareIcon, ArrowUpOnSquareIcon,
@ -37,6 +36,7 @@ import { DeleteModal } from "@components/modals";
import { Importer } from "./Importer"; import { Importer } from "./Importer";
import { Tooltip } from "@components/tooltips/Tooltip"; import { Tooltip } from "@components/tooltips/Tooltip";
import { Checkbox } from "@components/Checkbox"; import { Checkbox } from "@components/Checkbox";
import { RingResizeSpinner } from "@components/Icons";
enum ActionType { enum ActionType {
INDEXER_FILTER_CHANGE = "INDEXER_FILTER_CHANGE", INDEXER_FILTER_CHANGE = "INDEXER_FILTER_CHANGE",
@ -185,7 +185,7 @@ function FilterList({ toggleCreateFilter }: any) {
filterListState filterListState
); );
const { data, error } = useQuery(FiltersQueryOptions(indexerFilter, sortOrder)); const { isLoading, data, error } = useQuery(FiltersQueryOptions(indexerFilter, sortOrder));
useEffect(() => { useEffect(() => {
FilterListContext.set({ indexerFilter, sortOrder, status }); FilterListContext.set({ indexerFilter, sortOrder, status });
@ -213,19 +213,19 @@ function FilterList({ toggleCreateFilter }: any) {
</div> </div>
</div> </div>
{data && data.length > 0 ? ( {isLoading
? <div className="flex items-center justify-center py-64"><RingResizeSpinner className="text-blue-500 size-24"/></div>
: data && data.length > 0 ? (
<ul className="min-w-full divide-y divide-gray-150 dark:divide-gray-775"> <ul className="min-w-full divide-y divide-gray-150 dark:divide-gray-775">
{filtered.filtered.length > 0 ? ( {filtered.filtered.length > 0
filtered.filtered.map((filter: Filter, idx) => ( ? filtered.filtered.map((filter: Filter, idx) => <FilterListItem filter={filter} key={filter.id} idx={idx}/>)
<FilterListItem filter={filter} values={filter} key={filter.id} idx={idx} /> : <EmptyListState text={`No ${status} filters`}/>
)) }
) : (
<EmptyListState text={`No ${status} filters`} />
)}
</ul> </ul>
) : ( ) : (
<EmptyListState text="No filters here.." buttonText="Add new" buttonOnClick={toggleCreateFilter}/> <EmptyListState text="No filters here.." buttonText="Add new" buttonOnClick={toggleCreateFilter}/>
)} )
}
</div> </div>
</div> </div>
); );
@ -266,7 +266,6 @@ const StatusButton = ({ data, label, value, currentValue, dispatch }: StatusButt
}; };
interface FilterItemDropdownProps { interface FilterItemDropdownProps {
values: FormikValues;
filter: Filter; filter: Filter;
onToggle: (newState: boolean) => void; onToggle: (newState: boolean) => void;
} }
@ -579,11 +578,10 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
interface FilterListItemProps { interface FilterListItemProps {
filter: Filter; filter: Filter;
values: FormikValues;
idx: number; idx: number;
} }
function FilterListItem({ filter, values, idx }: FilterListItemProps) { function FilterListItem({ filter, idx }: FilterListItemProps) {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const updateMutation = useMutation({ const updateMutation = useMutation({
@ -684,7 +682,6 @@ function FilterListItem({ filter, values, idx }: FilterListItemProps) {
</span> </span>
<span className="min-w-fit px-4 py-2 whitespace-nowrap text-right text-sm font-medium"> <span className="min-w-fit px-4 py-2 whitespace-nowrap text-right text-sm font-medium">
<FilterItemDropdown <FilterItemDropdown
values={values}
filter={filter} filter={filter}
onToggle={toggleActive} onToggle={toggleActive}
/> />