Skip to content

Commit ed3434e

Browse files
authored
Merge pull request #12863 from ethereum/performance/mobile-dev-docs-contributors
Performance - contributors component refactor
2 parents 6c066cc + 8f62875 commit ed3434e

File tree

4 files changed

+69
-70
lines changed

4 files changed

+69
-70
lines changed

src/components/FileContributors.tsx

Lines changed: 56 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import {
88
ListItem,
99
ModalBody,
1010
ModalHeader,
11-
Skeleton as ChakraSkeleton,
12-
SkeletonCircle as ChakraSkeletonCircle,
11+
SkeletonText,
1312
UnorderedList,
13+
useBreakpointValue,
1414
VStack,
1515
} from "@chakra-ui/react"
1616

@@ -33,13 +33,7 @@ const skeletonColorProps = {
3333
endColor: "searchBackgroundEmpty",
3434
}
3535

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} />
4337

4438
const ContributorList = ({ children }: { children: React.ReactNode }) => {
4539
return (
@@ -87,6 +81,8 @@ const FileContributors = ({
8781
const [isModalOpen, setModalOpen] = useState(false)
8882
const { locale } = useRouter()
8983

84+
const isDesktop = useBreakpointValue({ base: false, md: true })
85+
9086
if (error) return null
9187
const lastContributor: Author = contributors.length
9288
? contributors[0]
@@ -111,16 +107,18 @@ const FileContributors = ({
111107

112108
<ModalBody>
113109
<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>
124122
</ModalBody>
125123
</Modal>
126124

@@ -133,49 +131,48 @@ const FileContributors = ({
133131
{...props}
134132
>
135133
<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+
)}
158156
</Flex>
159157

160158
<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>
179176
</VStack>
180177
</Flex>
181178
</>

src/components/SideNav.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { ReactNode, useEffect, useState } from "react"
1+
import { useEffect, useState } from "react"
22
import { motion } from "framer-motion"
33
import { useTranslation } from "next-i18next"
4-
import { MdExpandMore } from "react-icons/md"
4+
import { MdChevronRight } from "react-icons/md"
55
import { Box, HStack, Icon } from "@chakra-ui/react"
66

77
import { ChildOnlyProp } from "@/lib/types"
@@ -13,13 +13,12 @@ import docLinks from "../data/developer-docs-links.yaml"
1313

1414
export const dropdownIconContainerVariant = {
1515
open: {
16-
rotate: 0,
17-
y: 3,
16+
rotate: 90,
1817
transition: {
1918
duration: 0.4,
2019
},
2120
},
22-
closed: { rotate: -90, y: 0 },
21+
closed: { rotate: 0 },
2322
}
2423

2524
const innerLinksVariants = {
@@ -105,8 +104,9 @@ const NavLink = ({ item, path, isTopLevel }: NavLinkProps) => {
105104
variants={dropdownIconContainerVariant}
106105
animate={isOpen ? "open" : "closed"}
107106
cursor="pointer"
107+
display="flex"
108108
>
109-
<Icon as={MdExpandMore} boxSize={6} color="secondary" />
109+
<Icon as={MdChevronRight} boxSize={6} color="secondary" />
110110
</Box>
111111
</LinkContainer>
112112
<Box

src/components/SideNavMobile.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from "react"
22
import { AnimatePresence, motion } from "framer-motion"
33
import { useTranslation } from "next-i18next"
4-
import { MdExpandMore } from "react-icons/md"
4+
import { MdChevronRight } from "react-icons/md"
55
import { Box, Center, HStack, Icon } from "@chakra-ui/react"
66

77
import type { ChildOnlyProp, TranslationKey } from "@/lib/types"
@@ -108,11 +108,12 @@ const NavLink = ({ item, path, toggle }: NavLinkProps) => {
108108
<Box
109109
as={motion.div}
110110
cursor="pointer"
111+
display="flex"
111112
onClick={() => setIsOpen(!isOpen)}
112113
variants={dropdownIconContainerVariant}
113114
animate={isOpen ? "open" : "closed"}
114115
>
115-
<Icon as={MdExpandMore} boxSize={6} color="secondary" />
116+
<Icon as={MdChevronRight} boxSize={6} color="secondary" />
116117
</Box>
117118
</LinkContainer>
118119
<Box
@@ -185,10 +186,11 @@ const SideNavMobile = ({ path }: SideNavMobileProps) => {
185186
<Box
186187
as={motion.div}
187188
cursor="pointer"
189+
display="flex"
188190
variants={dropdownIconContainerVariant}
189191
animate={isOpen ? "open" : "closed"}
190192
>
191-
<Icon as={MdExpandMore} boxSize={6} color="secondary" />
193+
<Icon as={MdChevronRight} boxSize={6} color="secondary" />
192194
</Box>
193195
</Center>
194196
<AnimatePresence>

src/layouts/Docs.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ const H1 = (props: HeadingProps) => (
9898
{...baseHeadingStyle}
9999
fontSize={{ base: "2rem", md: "2.5rem" }}
100100
mt={{ base: 0, md: 8 }}
101-
mb={{ base: 4, md: 8 }}
101+
mb="8"
102102
{...props}
103103
/>
104104
)
@@ -145,7 +145,7 @@ const Content = (props: ChildOnlyProp) => {
145145
as={MainArticle}
146146
flex={`1 1 ${mdBreakpoint}`}
147147
w={{ base: "full", lg: "0" }}
148-
pt={{ base: 32, md: 12 }}
148+
pt={{ base: 8, md: 12 }}
149149
pb={{ base: 8, md: 16 }}
150150
px={{ base: 8, md: 16 }}
151151
m="0 auto"

0 commit comments

Comments
 (0)