zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

feat: render app shell with ssr to improve loading experience (#448)

Browse source
This commit is contained in:
Daniel Roe 2022-12-17 16:55:29 +00:00 • committed by GitHub
parent b545efeacc
commit 9395b7031e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
35 changed files with 169 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

6
components/nav/NavBottom.vue
View file

@ -10,7 +10,7 @@ const moreMenuVisible = ref(false)
class="after-content-empty after:(h-[calc(100%+0.5px)] w-0.1px pointer-events-none)"
>
<!-- These weird styles above are used for scroll locking, don't change it unless you know exactly what you're doing. -->
<template v-if="currentUser">
<template v-if="isMastoInitialised && currentUser">
<NuxtLink to="/home" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:home-5-line />
</NuxtLink>
@ -24,12 +24,12 @@ const moreMenuVisible = ref(false)
<NuxtLink group :to="`/${currentServer}/public/local`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:group-2-line />
</NuxtLink>
<template v-if="!currentUser">
<template v-if="!isMastoInitialised || !currentUser">
<NuxtLink :to="`/${currentServer}/public`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:earth-line />
</NuxtLink>
</template>
<template v-if="currentUser">
<template v-if="isMastoInitialised && currentUser">
<NuxtLink to="/conversations" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:at-line />
</NuxtLink>

2
components/nav/NavBottomMoreMenu.vue
View file

@ -96,7 +96,7 @@ onBeforeUnmount(() => {
</button>
</NavSelectLanguage>
<!-- Toggle Feature Flags -->
<NavSelectFeatureFlags v-if="currentUser">
<NavSelectFeatureFlags v-if="isMastoInitialised && currentUser">
<button
flex flex-row items-center
block px-5 py-2 focus-blue w-full

4
components/nav/NavFooter.vue
View file

@ -30,7 +30,7 @@ const buildTimeAgo = useTimeAgo(buildTime, timeAgoOptions)
</button>
</CommonTooltip>
</NavSelectLanguage>
<NavSelectFeatureFlags v-if="currentUser">
<NavSelectFeatureFlags v-if="isMastoInitialised && currentUser">
<CommonTooltip :content="$t('nav_footer.select_feature_flags')">
<button flex :aria-label="$t('nav_footer.select_feature_flags')">
<div i-ri:flag-line text-lg />
@ -44,7 +44,7 @@ const buildTimeAgo = useTimeAgo(buildTime, timeAgoOptions)
</button>
</div>
<div>{{ $t('app_desc_short') }}</div>
<div>
<div v-if="isMastoInitialised">
<i18n-t keypath="nav_footer.built_at">
<time :datetime="buildTime" :title="$d(buildTimeDate, 'long')">{{ buildTimeAgo }}</time>
</i18n-t>

6
components/nav/NavSide.vue
View file

@ -4,7 +4,7 @@ const { notifications } = useNotifications()
<template>
<nav md:px3 md:py4 flex="~ col gap2" text-size-base leading-normal md:text-lg>
<template v-if="currentUser">
<template v-if="isMastoInitialised && currentUser">
<NavSideItem :text="$t('nav_side.home')" to="/home" icon="i-ri:home-5-line" />
<NavSideItem :text="$t('nav_side.notifications')" to="/notifications" icon="i-ri:notification-4-line">
<template #icon>
@ -20,12 +20,12 @@ const { notifications } = useNotifications()
<NavSideItem :text="$t('nav_side.explore')" :to="`/${currentServer}/explore`" icon="i-ri:hashtag" />
<NavSideItem :text="$t('nav_side.local')" :to="`/${currentServer}/public/local`" icon="i-ri:group-2-line " />
<NavSideItem :text="$t('nav_side.federated')" :to="`/${currentServer}/public`" icon="i-ri:earth-line" />
<template v-if="currentUser">
<template v-if="isMastoInitialised && currentUser">
<NavSideItem :text="$t('nav_side.conversations')" to="/conversations" icon="i-ri:at-line" />
<NavSideItem :text="$t('nav_side.favourites')" to="/favourites" icon="i-ri:heart-3-line" />
<NavSideItem :text="$t('nav_side.bookmarks')" to="/bookmarks" icon="i-ri:bookmark-line " />
<NavSideItem
v-if="isMediumScreen"
v-if="isHydrated && isMediumScreen"
:text="currentUser.account.displayName"
:to="getAccountRoute(currentUser.account)"
icon="i-ri:account-circle-line"

2
components/nav/NavSideItem.vue
View file

@ -25,7 +25,7 @@ useCommand({
</script>
<template>
<NuxtLink :to="to" active-class="text-primary" group focus:outline-none @click="$scrollToTop">
<NuxtLink :to="to" :active-class="isMastoInitialised ? 'text-primary' : ''" group focus:outline-none @click="$scrollToTop">
<div flex w-fit px5 py2 md:gap2 gap4 items-center transition-100 rounded-full group-hover:bg-active group-focus-visible:ring="2 current">
<slot name="icon">
<div :class="icon" md:text-size-inherit text-xl />

2
components/nav/NavUser.vue
View file

@ -1,5 +1,5 @@
<template>
<VDropdown v-if="currentUser">
<VDropdown v-if="isMastoInitialised && currentUser">
<div style="-webkit-touch-callout: none;">
<AccountAvatar
ref="avatar"