aiden
/
memos
mirror of https://github.com/usememos/memos
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: tweak load more button

Browse Source
pull/3811/head
Steven 11 months ago
parent fc2cd43dc2
commit 9a27fdf855
5 changed files with 57 additions and 64 deletions
Show Stats Download Patch File Download Diff File

5
web/src/locales/en.json
Unescape Escape View File

@ -102,10 +102,7 @@
"copy-link": "Copy Link", "copy-link": "Copy Link",
"count-memos-in-date": "{{count}} memos in {{date}}", "count-memos-in-date": "{{count}} memos in {{date}}",
"delete-confirm": "Are you sure you want to delete this memo? THIS ACTION IS IRREVERSIBLE", "delete-confirm": "Are you sure you want to delete this memo? THIS ACTION IS IRREVERSIBLE",
"delete-memo": "Delete Memo", "load-more": "Load more",
"embed": "Embed",
"fetch-more": "Click to fetch more",
"fetching-data": "Fetching data…",
"no-archived-memos": "No archived memos.", "no-archived-memos": "No archived memos.",
"search-placeholder": "Search memos", "search-placeholder": "Search memos",
"show-more": "Show more", "show-more": "Show more",

30
web/src/pages/Archived.tsx
Unescape Escape View File

@ -132,25 +132,25 @@ const Archived = () => {
<MemoContent key={`${memo.name}-${memo.displayTime}`} memoName={memo.name} nodes={memo.nodes} readonly={true} /> <MemoContent key={`${memo.name}-${memo.displayTime}`} memoName={memo.name} nodes={memo.nodes} readonly={true} />
</div> </div>
))} ))}
{isRequesting ? ( {nextPageToken && (
<div className="flex flex-row justify-center items-center w-full my-4 text-gray-400">
<Icon.Loader className="w-4 h-auto animate-spin mr-1" />
<p className="text-sm italic">{t("memo.fetching-data")}</p>
</div>
) : !nextPageToken ? (
sortedMemos.length === 0 && (
<div className="w-full mt-16 mb-8 flex flex-col justify-center items-center italic">
<Empty />
<p className="mt-4 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
</div>
)
) : (
<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 variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={() => fetchMemos(nextPageToken)}> <Button
{t("memo.fetch-more")} variant="plain"
color="neutral"
loading={isRequesting}
endDecorator={<Icon.ArrowDown className="w-4 h-auto" />}
onClick={() => fetchMemos(nextPageToken)}
>
{t("memo.load-more")}
</Button> </Button>
</div> </div>
)} )}
{!nextPageToken && sortedMemos.length === 0 && (
<div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
<Empty />
<p className="mt-2 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
</div>
)}
</div> </div>
</div> </div>
</section> </section>

26
web/src/pages/Explore.tsx
Unescape Escape View File

@ -78,24 +78,24 @@ const Explore = () => {
{sortedMemos.map((memo) => ( {sortedMemos.map((memo) => (
<MemoView key={`${memo.name}-${memo.updateTime}`} memo={memo} showCreator showVisibility showPinned compact /> <MemoView key={`${memo.name}-${memo.updateTime}`} memo={memo} showCreator showVisibility showPinned compact />
))} ))}
{isRequesting ? ( {nextPageToken && (
<div className="flex flex-row justify-center items-center w-full my-4 text-gray-400"> <div className="w-full flex flex-row justify-center items-center my-4">
<Icon.Loader className="w-4 h-auto animate-spin mr-1" /> <Button
<p className="text-sm italic">{t("memo.fetching-data")}</p> variant="plain"
color="neutral"
loading={isRequesting}
endDecorator={<Icon.ArrowDown className="w-4 h-auto" />}
onClick={() => fetchMemos(nextPageToken)}
>
{t("memo.load-more")}
</Button>
</div> </div>
) : !nextPageToken ? ( )}
sortedMemos.length === 0 && ( {!nextPageToken && sortedMemos.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>
</div> </div>
)
) : (
<div className="w-full flex flex-row justify-center items-center my-4">
<Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={() => fetchMemos(nextPageToken)}>
{t("memo.fetch-more")}
</Button>
</div>
)} )}
</div> </div>
</div> </div>

26
web/src/pages/Home.tsx
Unescape Escape View File

@ -94,24 +94,24 @@ const Home = () => {
{sortedMemos.map((memo) => ( {sortedMemos.map((memo) => (
<MemoView key={`${memo.name}-${memo.updateTime}`} memo={memo} showVisibility showPinned compact /> <MemoView key={`${memo.name}-${memo.updateTime}`} memo={memo} showVisibility showPinned compact />
))} ))}
{isRequesting ? ( {nextPageToken && (
<div className="flex flex-row justify-center items-center w-full my-4 text-gray-400"> <div className="w-full flex flex-row justify-center items-center my-4">
<Icon.Loader className="w-4 h-auto animate-spin mr-1" /> <Button
<p className="text-sm italic">{t("memo.fetching-data")}</p> variant="plain"
color="neutral"
loading={isRequesting}
endDecorator={<Icon.ArrowDown className="w-4 h-auto" />}
onClick={() => fetchMemos(nextPageToken)}
>
{t("memo.load-more")}
</Button>
</div> </div>
) : !nextPageToken ? ( )}
sortedMemos.length === 0 && ( {!nextPageToken && sortedMemos.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>
</div> </div>
)
) : (
<div className="w-full flex flex-row justify-center items-center my-4">
<Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={() => fetchMemos(nextPageToken)}>
{t("memo.fetch-more")}
</Button>
</div>
)} )}
</div> </div>
</div> </div>

26
web/src/pages/UserProfile.tsx
Unescape Escape View File

@ -134,29 +134,25 @@ const UserProfile = () => {
{sortedMemos.map((memo) => ( {sortedMemos.map((memo) => (
<MemoView key={`${memo.name}-${memo.displayTime}`} memo={memo} showVisibility showPinned compact /> <MemoView key={`${memo.name}-${memo.displayTime}`} memo={memo} showVisibility showPinned compact />
))} ))}
{isRequesting ? ( {nextPageToken && (
<div className="flex flex-row justify-center items-center w-full my-4 text-gray-400">
<Icon.Loader className="w-4 h-auto animate-spin mr-1" />
<p className="text-sm italic">{t("memo.fetching-data")}</p>
</div>
) : !nextPageToken ? (
sortedMemos.length === 0 && (
<div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
<Empty />
<p className="mt-2 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
</div>
)
) : (
<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"
endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} color="neutral"
loading={isRequesting}
endDecorator={<Icon.ArrowDown className="w-4 h-auto" />}
onClick={() => fetchMemos(nextPageToken)} onClick={() => fetchMemos(nextPageToken)}
> >
{t("memo.fetch-more")} {t("memo.load-more")}
</Button> </Button>
</div> </div>
)} )}
{!nextPageToken && sortedMemos.length === 0 && (
<div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
<Empty />
<p className="mt-2 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
</div>
)}
</> </>
) : ( ) : (
<p>Not found</p> <p>Not found</p>

Write Preview
Loading…
Cancel
Save