YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-03-22 05:30:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: add spinner to paged memo list

Browse Source
This commit is contained in:
johnnyjoy 2024-09-22 19:41:27 +08:00
parent 339c38750f
commit 1f7a90cec4
1 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/components/PagedMemoList/PagedMemoList.tsx
View File

@ -1,5 +1,5 @@
import { Button } from "@mui/joy"; import { Button } from "@mui/joy";
import { ArrowDownIcon } from "lucide-react"; import { ArrowDownIcon, LoaderIcon } from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts"; import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts";
import { useMemoList, useMemoStore } from "@/store/v1"; import { useMemoList, useMemoStore } from "@/store/v1";
@ -24,7 +24,7 @@ const PagedMemoList = (props: Props) => {
const memoStore = useMemoStore(); const memoStore = useMemoStore();
const memoList = useMemoList(); const memoList = useMemoList();
const [state, setState] = useState<State>({ const [state, setState] = useState<State>({
isRequesting: false, isRequesting: true, // Initial request
nextPageToken: "", nextPageToken: "",
}); });
const sortedMemoList = props.listSort ? props.listSort(memoList.value) : memoList.value; const sortedMemoList = props.listSort ? props.listSort(memoList.value) : memoList.value;
@ -55,7 +55,12 @@ const PagedMemoList = (props: Props) => {
return ( return (
<> <>
{sortedMemoList.map((memo) => props.renderer(memo))} {sortedMemoList.map((memo) => props.renderer(memo))}
{state.nextPageToken && ( {state.isRequesting && (
<div className="w-full flex flex-row justify-center items-center my-4">
<LoaderIcon className="animate-spin text-zinc-500" />
</div>
)}
{!state.isRequesting && state.nextPageToken && (
<div className="w-full flex flex-row justify-center items-center my-4"> <div className="w-full flex flex-row justify-center items-center my-4">
<Button <Button
variant="plain" variant="plain"
@ -68,7 +73,7 @@ const PagedMemoList = (props: Props) => {
</Button> </Button>
</div> </div>
)} )}
{!state.nextPageToken && sortedMemoList.length === 0 && ( {!state.isRequesting && !state.nextPageToken && sortedMemoList.length === 0 && (
<div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic"> <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
<Empty /> <Empty />
<p className="mt-2 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p> <p className="mt-2 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>