8
8
ListItem ,
9
9
ModalBody ,
10
10
ModalHeader ,
11
- Skeleton as ChakraSkeleton ,
12
- SkeletonCircle as ChakraSkeletonCircle ,
11
+ SkeletonText ,
13
12
UnorderedList ,
13
+ useBreakpointValue ,
14
14
VStack ,
15
15
} from "@chakra-ui/react"
16
16
@@ -33,13 +33,7 @@ const skeletonColorProps = {
33
33
endColor : "searchBackgroundEmpty" ,
34
34
}
35
35
36
- const Skeleton = ( props ) => (
37
- < ChakraSkeleton { ...skeletonColorProps } borderRadius = "md" { ...props } />
38
- )
39
-
40
- const SkeletonCircle = ( props ) => (
41
- < ChakraSkeletonCircle { ...skeletonColorProps } { ...props } />
42
- )
36
+ const Skeleton = ( props ) => < SkeletonText { ...skeletonColorProps } { ...props } />
43
37
44
38
const ContributorList = ( { children } : { children : React . ReactNode } ) => {
45
39
return (
@@ -87,6 +81,8 @@ const FileContributors = ({
87
81
const [ isModalOpen , setModalOpen ] = useState ( false )
88
82
const { locale } = useRouter ( )
89
83
84
+ const isDesktop = useBreakpointValue ( { base : false , md : true } )
85
+
90
86
if ( error ) return null
91
87
const lastContributor : Author = contributors . length
92
88
? contributors [ 0 ]
@@ -111,16 +107,18 @@ const FileContributors = ({
111
107
112
108
< ModalBody >
113
109
< Translation id = "contributors-thanks" />
114
- { contributors ? (
115
- < ContributorList >
116
- { contributors . map ( ( contributor ) => (
117
- < Contributor
118
- contributor = { contributor }
119
- key = { contributor . email }
120
- />
121
- ) ) }
122
- </ ContributorList >
123
- ) : null }
110
+ < Skeleton noOfLines = "4" mt = "4" isLoaded = { ! loading } >
111
+ { contributors ? (
112
+ < ContributorList >
113
+ { contributors . map ( ( contributor ) => (
114
+ < Contributor
115
+ contributor = { contributor }
116
+ key = { contributor . email }
117
+ />
118
+ ) ) }
119
+ </ ContributorList >
120
+ ) : null }
121
+ </ Skeleton >
124
122
</ ModalBody >
125
123
</ Modal >
126
124
@@ -133,49 +131,48 @@ const FileContributors = ({
133
131
{ ...props }
134
132
>
135
133
< Flex me = { 4 } alignItems = "center" flex = "1" >
136
- < SkeletonCircle size = "10" me = { 4 } isLoaded = { ! loading } >
137
- < Avatar
138
- height = "40px"
139
- width = "40px"
140
- src = { lastContributor . avatarUrl }
141
- name = { lastContributor . name }
142
- me = { 2 }
143
- />
144
- </ SkeletonCircle >
145
-
146
- < Skeleton isLoaded = { ! loading } >
147
- < Text m = { 0 } color = "text200" >
148
- < Translation id = "last-edit" /> : { " " }
149
- { lastContributor . user ? .url && (
150
- < InlineLink href = { lastContributor . user . url } >
151
- @ { lastContributor . user . login }
152
- </ InlineLink >
153
- ) }
154
- { ! lastContributor . user && < span > { lastContributor . name } </ span > } , { " " }
155
- { getLocaleTimestamp ( locale as Lang , lastEdit ) }
156
- </ Text >
157
- </ Skeleton >
134
+ { isDesktop && (
135
+ < >
136
+ < Avatar
137
+ height = "40px"
138
+ width = "40px"
139
+ src = { lastContributor . avatarUrl }
140
+ name = { lastContributor . name }
141
+ me = { 2 }
142
+ / >
143
+
144
+ < Text m = { 0 } color = "text200" >
145
+ < Translation id = "last-edit" /> : { " " }
146
+ { lastContributor . user ?. url && (
147
+ < InlineLink href = { lastContributor . user . url } >
148
+ @ { lastContributor . user . login }
149
+ </ InlineLink >
150
+ ) }
151
+ { ! lastContributor . user && < span > { lastContributor . name } </ span > } , { " " }
152
+ { getLocaleTimestamp ( locale as Lang , lastEdit ) }
153
+ </ Text >
154
+ </ >
155
+ ) }
158
156
</ Flex >
159
157
160
158
< VStack align = "stretch" justifyContent = "space-between" spacing = { 2 } >
161
- < Skeleton isLoaded = { ! loading } mt = { { base : 4 , md : 0 } } >
162
- < Button
163
- variant = "outline"
164
- bg = "background.base"
165
- border = { 0 }
166
- onClick = { ( ) => {
167
- setModalOpen ( true )
168
- trackCustomEvent ( {
169
- eventCategory : "see contributors" ,
170
- eventAction : "click" ,
171
- eventName : "click" ,
172
- } )
173
- } }
174
- w = { { base : "full" , md : "inherit" } }
175
- >
176
- < Translation id = "see-contributors" />
177
- </ Button >
178
- </ Skeleton >
159
+ < Button
160
+ variant = "outline"
161
+ bg = "background.base"
162
+ border = { 0 }
163
+ mb = { { base : 4 , md : 0 } }
164
+ onClick = { ( ) => {
165
+ setModalOpen ( true )
166
+ trackCustomEvent ( {
167
+ eventCategory : "see contributors" ,
168
+ eventAction : "click" ,
169
+ eventName : "click" ,
170
+ } )
171
+ } }
172
+ w = { { base : "full" , md : "inherit" } }
173
+ >
174
+ < Translation id = "see-contributors" />
175
+ </ Button >
179
176
</ VStack >
180
177
</ Flex >
181
178
</ >
0 commit comments