Skip to content

Commit 8920005

Browse files
fsansalvadorefsansalvadore
authored
[www] use dynamic imports (supabase#38239)
use dynamic imports
1 parent 2538a5c commit 8920005

File tree

3 files changed

+91
-75
lines changed

3 files changed

+91
-75
lines changed

‎apps/www/components/Layouts/Default.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1+
'use client'
2+
13
import Nav from 'components/Nav/index'
2-
import Footer from 'components/Footer/index'
4+
import dynamic from 'next/dynamic'
35
import { cn } from 'ui'
4-
import { useForceDeepDark } from '~/lib/theme.utils'
6+
import { useForceDeepDark } from 'lib/theme.utils'
7+
8+
const Footer = dynamic(() => import('components/Footer/index'))
59

610
type Props = {
711
hideHeader?: boolean

‎apps/www/components/Nav/index.tsx‎

Lines changed: 73 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,63 @@
1+
'use client'
2+
3+
import dynamic from 'next/dynamic'
14
import Link from 'next/link'
2-
import { useRouter } from 'next/router'
35
import React, { useState } from 'react'
46
import { useWindowSize } from 'react-use'
57

6-
import { useIsLoggedIn, useIsUserLoading, useUser } from 'common'
8+
import { useIsLoggedIn, useUser } from 'common'
79
import { Button, buttonVariants, cn } from 'ui'
810
import { AuthenticatedDropdownMenu } from 'ui-patterns'
9-
import {
10-
NavigationMenu,
11-
NavigationMenuContent,
12-
NavigationMenuItem,
13-
NavigationMenuLink,
14-
NavigationMenuList,
15-
NavigationMenuTrigger,
16-
} from 'ui/src/components/shadcn/ui/navigation-menu'
1711

18-
import ScrollProgress from 'components/ScrollProgress'
19-
import { useSendTelemetryEvent } from 'lib/telemetry'
2012
import GitHubButton from './GitHubButton'
2113
import HamburgerButton from './HamburgerMenu'
22-
import MenuItem from './MenuItem'
23-
import MobileMenu from './MobileMenu'
2414
import RightClickBrandLogo from './RightClickBrandLogo'
15+
import { useSendTelemetryEvent } from 'lib/telemetry'
2516
import useDropdownMenu from './useDropdownMenu'
2617

2718
import { getMenu } from 'data/nav'
19+
import { usePathname } from 'next/navigation'
20+
21+
const MenuItem = dynamic(() => import('./MenuItem'))
22+
const MobileMenu = dynamic(() => import('./MobileMenu'))
23+
const NavigationMenu = dynamic(() =>
24+
import('ui/src/components/shadcn/ui/navigation-menu').then((mod) => mod.NavigationMenu)
25+
)
26+
const NavigationMenuContent = dynamic(() =>
27+
import('ui/src/components/shadcn/ui/navigation-menu').then((mod) => mod.NavigationMenuContent)
28+
)
29+
const NavigationMenuItem = dynamic(() =>
30+
import('ui/src/components/shadcn/ui/navigation-menu').then((mod) => mod.NavigationMenuItem)
31+
)
32+
const NavigationMenuLink = dynamic(() =>
33+
import('ui/src/components/shadcn/ui/navigation-menu').then((mod) => mod.NavigationMenuLink)
34+
)
35+
const NavigationMenuList = dynamic(() =>
36+
import('ui/src/components/shadcn/ui/navigation-menu').then((mod) => mod.NavigationMenuList)
37+
)
38+
const NavigationMenuTrigger = dynamic(() =>
39+
import('ui/src/components/shadcn/ui/navigation-menu').then((mod) => mod.NavigationMenuTrigger)
40+
)
41+
const ScrollProgress = dynamic(() => import('components/ScrollProgress'))
2842

2943
interface Props {
3044
hideNavbar: boolean
3145
stickyNavbar?: boolean
3246
}
3347

3448
const Nav = ({ hideNavbar, stickyNavbar = true }: Props) => {
35-
const router = useRouter()
49+
const pathname = usePathname()
3650
const { width } = useWindowSize()
3751
const [open, setOpen] = useState(false)
52+
const isLoggedIn = useIsLoggedIn()
3853
const menu = getMenu()
3954
const sendTelemetryEvent = useSendTelemetryEvent()
4055
const user = useUser()
4156
const userMenu = useDropdownMenu(user)
4257

43-
const isLoggedIn = useIsLoggedIn()
44-
const isLoadingUser = useIsUserLoading()
45-
console.log({ isLoadingUser, isLoggedIn })
46-
47-
const isLaunchWeekPage = router.pathname.includes('/launch-week')
48-
const isLaunchWeekXPage = router.pathname === '/launch-week/x'
49-
const isGAWeekSection = router.pathname.startsWith('/ga-week')
58+
const isLaunchWeekPage = pathname?.includes('/launch-week')
59+
const isLaunchWeekXPage = pathname === '/launch-week/x'
60+
const isGAWeekSection = pathname?.startsWith('/ga-week')
5061
const disableStickyNav = isLaunchWeekXPage || isGAWeekSection || isLaunchWeekPage || !stickyNavbar
5162
const showLaunchWeekNavMode = !isLaunchWeekXPage && (isLaunchWeekPage || isGAWeekSection) && !open
5263

@@ -129,49 +140,47 @@ const Nav = ({ hideNavbar, stickyNavbar = true }: Props) => {
129140
</NavigationMenuList>
130141
</NavigationMenu>
131142
</div>
132-
{!isLoadingUser && (
133-
<div className="flex items-center gap-2 opacity-0 animate-fade-in !scale-100 delay-300">
134-
<GitHubButton />
143+
<div className="flex items-center gap-2 opacity-0 animate-fade-in !scale-100 delay-300">
144+
<GitHubButton />
135145

136-
{isLoggedIn ? (
137-
<>
138-
<Button className="hidden lg:block" asChild>
139-
<Link href="/dashboard/projects">Dashboard</Link>
140-
</Button>
141-
<AuthenticatedDropdownMenu menu={userMenu} user={user} site="www" />
142-
</>
143-
) : (
144-
<>
145-
<Button type="default" className="hidden lg:block" asChild>
146-
<Link
147-
href="https://supabase.com/dashboard"
148-
onClick={() =>
149-
sendTelemetryEvent({
150-
action: 'sign_in_button_clicked',
151-
properties: { buttonLocation: 'Header Nav' },
152-
})
153-
}
154-
>
155-
Sign in
156-
</Link>
157-
</Button>
158-
<Button className="hidden lg:block" asChild>
159-
<Link
160-
href="https://supabase.com/dashboard"
161-
onClick={() =>
162-
sendTelemetryEvent({
163-
action: 'start_project_button_clicked',
164-
properties: { buttonLocation: 'Header Nav' },
165-
})
166-
}
167-
>
168-
Start your project
169-
</Link>
170-
</Button>
171-
</>
172-
)}
173-
</div>
174-
)}
146+
{isLoggedIn ? (
147+
<>
148+
<Button className="hidden lg:block" asChild>
149+
<Link href="/dashboard/projects">Dashboard</Link>
150+
</Button>
151+
<AuthenticatedDropdownMenu menu={userMenu} user={user} site="www" />
152+
</>
153+
) : (
154+
<>
155+
<Button type="default" className="hidden lg:block" asChild>
156+
<Link
157+
href="https://supabase.com/dashboard"
158+
onClick={() =>
159+
sendTelemetryEvent({
160+
action: 'sign_in_button_clicked',
161+
properties: { buttonLocation: 'Header Nav' },
162+
})
163+
}
164+
>
165+
Sign in
166+
</Link>
167+
</Button>
168+
<Button className="hidden lg:block" asChild>
169+
<Link
170+
href="https://supabase.com/dashboard"
171+
onClick={() =>
172+
sendTelemetryEvent({
173+
action: 'start_project_button_clicked',
174+
properties: { buttonLocation: 'Header Nav' },
175+
})
176+
}
177+
>
178+
Start your project
179+
</Link>
180+
</Button>
181+
</>
182+
)}
183+
</div>
175184
</div>
176185
<HamburgerButton
177186
toggleFlyOut={() => setOpen(true)}

‎apps/www/lib/mdx/mdxComponents.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import { PropsWithChildren } from 'react'
1+
'use client'
22

3+
import { PropsWithChildren } from 'react'
34
import { CH } from '@code-hike/mdx/components'
5+
import dynamic from 'next/dynamic'
46
import { ArrowUpRight, Triangle } from 'lucide-react'
57
import {
68
Badge,
@@ -12,14 +14,15 @@ import {
1214
Image,
1315
} from 'ui'
1416
import { Admonition } from 'ui-patterns/admonition'
15-
import { type ImageProps } from 'ui/src/components/Image/Image'
16-
import Avatar from '~/components/Avatar'
17-
import Chart from '~/components/Charts/PGCharts'
18-
import CodeBlock from '~/components/CodeBlock/CodeBlock'
19-
import ImageFadeStack from '~/components/ImageFadeStack'
20-
import ImageGrid from '~/components/ImageGrid'
21-
import InlineCodeTag from '~/components/InlineCode'
22-
import Quote from '~/components/Quote'
17+
import type { ImageProps } from 'ui/src/components/Image/Image'
18+
19+
const Avatar = dynamic(() => import('~/components/Avatar'))
20+
const Chart = dynamic(() => import('~/components/Charts/PGCharts'))
21+
const CodeBlock = dynamic(() => import('~/components/CodeBlock/CodeBlock'))
22+
const ImageFadeStack = dynamic(() => import('~/components/ImageFadeStack'))
23+
const ImageGrid = dynamic(() => import('~/components/ImageGrid'))
24+
const InlineCodeTag = dynamic(() => import('~/components/InlineCode'))
25+
const Quote = dynamic(() => import('~/components/Quote'))
2326

2427
// import all components used in blog articles here
2528
// to do: move this into a helper/utils, it is used elsewhere

0 commit comments

Comments
 (0)