Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
C
canifa_note
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Vũ Hoàng Anh
canifa_note
Commits
1e954070
Commit
1e954070
authored
Oct 30, 2025
by
Steven
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
refactor(web): improve memo component skeleton and loading states
parent
5e47f25b
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
8 additions
and
6 deletions
+8
-6
MemoSkeleton.tsx
web/src/components/MemoSkeleton.tsx
+1
-1
MemoView.tsx
web/src/components/MemoView.tsx
+4
-1
PagedMemoList.tsx
web/src/components/PagedMemoList/PagedMemoList.tsx
+3
-4
No files found.
web/src/components/MemoSkeleton.tsx
View file @
1e954070
...
@@ -11,7 +11,7 @@ const MemoSkeleton = ({ showCreator = false, count = 6 }: Props) => {
...
@@ -11,7 +11,7 @@ const MemoSkeleton = ({ showCreator = false, count = 6 }: Props) => {
{
Array
.
from
({
length
:
count
}).
map
((
_
,
index
)
=>
(
{
Array
.
from
({
length
:
count
}).
map
((
_
,
index
)
=>
(
<
div
<
div
key=
{
index
}
key=
{
index
}
className=
"relative flex flex-col justify-start items-start bg-card w-full px-4 py-3 mb-2 gap-2 rounded-lg border border-border animate-pulse"
className=
"relative flex flex-col justify-start items-start bg-card w-full
max-w-2xl mx-auto
px-4 py-3 mb-2 gap-2 rounded-lg border border-border animate-pulse"
>
>
{
/* Header section */
}
{
/* Header section */
}
<
div
className=
"w-full flex flex-row justify-between items-center gap-2"
>
<
div
className=
"w-full flex flex-row justify-between items-center gap-2"
>
...
...
web/src/components/MemoView.tsx
View file @
1e954070
...
@@ -194,7 +194,10 @@ const MemoView: React.FC<Props> = observer((props: Props) => {
...
@@ -194,7 +194,10 @@ const MemoView: React.FC<Props> = observer((props: Props) => {
)
}
)
}
{
!
isInMemoDetailPage
&&
(
{
!
isInMemoDetailPage
&&
(
<
Link
<
Link
className=
"flex flex-row justify-start items-center rounded-md p-1 hover:opacity-80"
className=
{
cn
(
"flex flex-row justify-start items-center rounded-md p-1 hover:opacity-80"
,
commentAmount
===
0
&&
"invisible group-hover:visible"
,
)
}
to=
{
`/${memo.name}#comments`
}
to=
{
`/${memo.name}#comments`
}
viewTransition
viewTransition
state=
{
{
state=
{
{
...
...
web/src/components/PagedMemoList/PagedMemoList.tsx
View file @
1e954070
...
@@ -145,10 +145,9 @@ const PagedMemoList = observer((props: Props) => {
...
@@ -145,10 +145,9 @@ const PagedMemoList = observer((props: Props) => {
<
div
className=
"flex flex-col justify-start items-start w-full max-w-full"
>
<
div
className=
"flex flex-col justify-start items-start w-full max-w-full"
>
{
/* Show skeleton loader during initial load */
}
{
/* Show skeleton loader during initial load */
}
{
isRequesting
&&
sortedMemoList
.
length
===
0
?
(
{
isRequesting
&&
sortedMemoList
.
length
===
0
?
(
<>
<
div
className=
"w-full flex flex-col justify-start items-center"
>
{
showMemoEditor
&&
<
MemoEditor
className=
"mb-2"
cacheKey=
"home-memo-editor"
/>
}
<
MemoSkeleton
showCreator=
{
props
.
showCreator
}
count=
{
4
}
/>
<
MemoSkeleton
showCreator=
{
props
.
showCreator
}
count=
{
6
}
/>
</
div
>
</>
)
:
(
)
:
(
<>
<>
<
MasonryView
<
MasonryView
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment