Skip to content

C
canifa_note
Commit 9a27fdf8 authored by Steven's avatar Steven
Browse files
Options

chore: tweak load more button

parent fc2cd43d
Hide whitespace changes
Inline Side-by-side
Showing with 57 additions and 64 deletions
web/src/locales/en.json
View file @ 9a27fdf8
...@@ -102,10 +102,7 @@ ...@@ -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",
......
web/src/pages/Archived.tsx
View file @ 9a27fdf8
...@@ -132,25 +132,25 @@ const Archived = () => { ...@@ -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>
......
web/src/pages/Explore.tsx
View file @ 9a27fdf8
...@@ -78,25 +78,25 @@ const Explore = () => { ...@@ -78,25 +78,25 @@ 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">
<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 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>
{md && ( {md && (
......
web/src/pages/Home.tsx
View file @ 9a27fdf8
...@@ -94,25 +94,25 @@ const Home = () => { ...@@ -94,25 +94,25 @@ 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">
<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 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>
{md && ( {md && (
......
web/src/pages/UserProfile.tsx
View file @ 9a27fdf8
...@@ -134,29 +134,25 @@ const UserProfile = () => { ...@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment