Merge pull request #1011 from t3n/nav

fix: 🐛 add loading state to /dein-abo in nav
t3n · Dec 12, 2024 · ab0087b · ab0087b
2 parents ec018ac + c61ae36
commit ab0087b
Show file tree

Hide file tree

Showing 12 changed files with 56 additions and 48 deletions.
diff --git a/packages/components/src/LegacyHeader/LegacyDesktopHeader.d.ts b/packages/components/src/LegacyHeader/LegacyDesktopHeader.d.ts
@@ -10,6 +10,7 @@ export interface LegacyDesktopHeaderProps {
     userEmail?: string;
     isPlusUser?: boolean;
     isProMember?: boolean;
+    userLoading?: boolean;
     userMenuItems?: ReactNode[];
 }
 export declare const StickyHeader: import("styled-components").StyledComponent<"div", any, import("../Box").BoxProps, never>;

diff --git a/packages/components/src/LegacyHeader/LegacyDesktopHeader.tsx b/packages/components/src/LegacyHeader/LegacyDesktopHeader.tsx
@@ -32,6 +32,7 @@ export interface LegacyDesktopHeaderProps {
   userEmail?: string;
   isPlusUser?: boolean;
   isProMember?: boolean;
+  userLoading?: boolean;
   userMenuItems?: ReactNode[];
 }
 
@@ -200,6 +201,7 @@ const LegacyDesktopHeader: React.FC<LegacyDesktopHeaderProps> = ({
   userEmail,
   isPlusUser,
   isProMember,
+  userLoading,
   userMenuItems,
 }) => {
   const [displaySticky, setDisplaySticky] = useState(false);
@@ -277,7 +279,7 @@ const LegacyDesktopHeader: React.FC<LegacyDesktopHeaderProps> = ({
         </VisualHeader>
 
         <Box display="flex" flexDirection="column">
-          <LegacyMainNav isProMember={isProMember} />
+          <LegacyMainNav isProMember={isProMember} userLoading={userLoading} />
           <LegacyTagNav tags={tags} loading={tagsLoading} />
         </Box>
       </HeaderWrapper>
@@ -297,7 +299,11 @@ const LegacyDesktopHeader: React.FC<LegacyDesktopHeaderProps> = ({
               <T3nLogoSmall />
             </a>
             <StickyNavBox width="100%" position="relative">
-              <LegacyMainNav isSticky />
+              <LegacyMainNav
+                isProMember={isProMember}
+                userLoading={userLoading}
+                isSticky
+              />
               <SearchForm action="/suche" method="get">
                 <SearchInput
                   type="text"

diff --git a/packages/components/src/LegacyHeader/LegacyHeader.d.ts b/packages/components/src/LegacyHeader/LegacyHeader.d.ts
@@ -11,6 +11,7 @@ export interface LegacyHeaderProps {
     userEmail?: string;
     isPlusUser?: boolean;
     isProMember?: boolean;
+    userLoading?: boolean;
     userMenuItems?: ReactNode[];
 }
 declare const LegacyHeader: React.FC<LegacyHeaderProps>;

diff --git a/packages/components/src/LegacyHeader/LegacyHeader.tsx b/packages/components/src/LegacyHeader/LegacyHeader.tsx
@@ -17,6 +17,7 @@ export interface LegacyHeaderProps {
   userEmail?: string;
   isPlusUser?: boolean;
   isProMember?: boolean;
+  userLoading?: boolean;
   userMenuItems?: ReactNode[];
 }
 
@@ -31,6 +32,7 @@ const LegacyHeader: React.FC<LegacyHeaderProps> = ({
   userEmail,
   isPlusUser,
   isProMember,
+  userLoading,
   userMenuItems,
 }) => {
   return (
@@ -55,6 +57,7 @@ const LegacyHeader: React.FC<LegacyHeaderProps> = ({
           userEmail={userEmail}
           isPlusUser={isPlusUser}
           isProMember={isProMember}
+          userLoading={userLoading}
           userMenuItems={userMenuItems}
         />
       </Box>

diff --git a/packages/components/src/LegacyHeader/components/LegacyMainNav.d.ts b/packages/components/src/LegacyHeader/components/LegacyMainNav.d.ts
@@ -1,19 +1,19 @@
 import React from 'react';
 export interface LegacyMainNavProps {
     isProMember?: boolean;
+    userLoading?: boolean;
     isSticky?: boolean;
 }
 export type MainNavLinkGroupsType = {
     label: string;
     url?: string;
     bold?: boolean;
-    indicator?: boolean;
+    loading?: boolean;
     dropdownLinks?: {
         label: string;
         url: string;
     }[];
 };
 export declare const MainNavDropdown: import("styled-components").StyledComponent<"ul", any, {}, never>;
-export declare const Indicator: import("styled-components").StyledComponent<"span", any, {}, never>;
 declare const LegacyMainNav: React.FC<LegacyMainNavProps>;
 export default LegacyMainNav;
diff --git a/packages/components/src/LegacyHeader/components/LegacyMainNav.tsx b/packages/components/src/LegacyHeader/components/LegacyMainNav.tsx
@@ -13,19 +13,21 @@ import {
 import { ThemeProps } from '@t3n/theme';
 
 import Box from '../../Box';
+import Placeholder from '../../Placeholder';
 import Text from '../../Text';
 import HeaderLink from './LegacyHeaderLink';
 
 export interface LegacyMainNavProps {
   isProMember?: boolean;
+  userLoading?: boolean;
   isSticky?: boolean;
 }
 
 export type MainNavLinkGroupsType = {
   label: string;
   url?: string;
   bold?: boolean;
-  indicator?: boolean;
+  loading?: boolean;
   dropdownLinks?: {
     label: string;
     url: string;
@@ -138,40 +140,46 @@ const StyledText = styled(Text)`
   }
 `;
 
-export const Indicator = styled.span`
-  display: inline-block;
-  text-align: center;
-  letter-spacing: 0;
-  line-height: 1rem;
-  min-width: 1rem;
-  border-radius: 0.5rem;
+const GroupLabel: React.FC<MainNavLinkGroupsType> = ({
+  label,
+  bold,
+  loading,
+  url,
+}) => {
+  if (loading) {
+    return <Placeholder width="34px" height="30px" />;
+  }
 
-  ${({ theme }) => space({ theme, ml: '5px' })};
-  ${({ theme }) =>
-    position({
-      theme,
-      position: 'relative',
-      top: '-2px',
-    })};
-  ${({ theme }) => typography({ theme, fontSize: '12px' })};
-  ${({ theme }) =>
-    color({ theme, color: 'shades.white', bg: 'background.highlight' })};
-`;
+  if (url) {
+    return (
+      <HeaderLink href={url} title={label}>
+        <Text m={0} bold={!!bold} color={bold ? 'text.primary' : 'inherit'}>
+          {label}
+        </Text>
+      </HeaderLink>
+    );
+  }
+  return (
+    <StyledText m={0} bold={!!bold} color={bold ? 'text.primary' : 'inherit'}>
+      {label}
+    </StyledText>
+  );
+};
 
 const LegacyMainNav: React.FC<LegacyMainNavProps> = ({
   isProMember,
+  userLoading,
   isSticky,
 }) => {
   const mainNavLinkGroups: MainNavLinkGroupsType[] = [
     {
       label: isProMember ? 'Pro' : 'Plus',
       url: '/dein-abo',
-      indicator: true,
+      loading: userLoading,
     },
     {
       label: 'News',
       url: '/news/',
-      indicator: true,
     },
     {
       label: 'Magazin',
@@ -294,25 +302,12 @@ const LegacyMainNav: React.FC<LegacyMainNavProps> = ({
         {mainNavLinkGroups.map((group, idx) => (
           <MainNavItem key={idx} isSticky={isSticky}>
             <Box display="flex">
-              {group.url ? (
-                <HeaderLink href={group.url} title={group.label}>
-                  <Text
-                    m={0}
-                    bold={!!group.bold}
-                    color={group.bold ? 'text.primary' : 'inherit'}
-                  >
-                    {group.label}
-                  </Text>
-                </HeaderLink>
-              ) : (
-                <StyledText
-                  m={0}
-                  bold={!!group.bold}
-                  color={group.bold ? 'text.primary' : 'inherit'}
-                >
-                  {group.label}
-                </StyledText>
-              )}
+              <GroupLabel
+                label={group.label}
+                bold={group.bold}
+                loading={group.loading}
+                url={group.url}
+              />
               {group.dropdownLinks && <ArrowDownIcon />}
             </Box>
             {group.dropdownLinks && (

diff --git a/packages/components/src/LegacyHeader/components/LegacyMobileNav.d.ts b/packages/components/src/LegacyHeader/components/LegacyMobileNav.d.ts
@@ -9,7 +9,6 @@ export interface LegacyMobileNavProps {
 export type MobileNavLinksType = {
     label: string;
     url: string;
-    indicator?: boolean;
     bold?: boolean;
 };
 declare const LegacyMobileNav: React.FC<LegacyMobileNavProps>;

diff --git a/packages/components/src/LegacyHeader/components/LegacyMobileNav.tsx b/packages/components/src/LegacyHeader/components/LegacyMobileNav.tsx
@@ -34,7 +34,6 @@ export interface LegacyMobileNavProps {
 export type MobileNavLinksType = {
   label: string;
   url: string;
-  indicator?: boolean;
   bold?: boolean;
 };
 
@@ -171,12 +170,10 @@ const LegacyMobileNav: React.FC<LegacyMobileNavProps> = ({
     {
       label: isProMember ? 'Pro' : 'Plus',
       url: '/dein-abo',
-      indicator: false,
     },
     {
       label: 'News',
       url: '/news/',
-      indicator: false,
     },
     {
       label: 'Magazin',

diff --git a/packages/components/src/LegacyPageLayout/LegacyPageLayout.d.ts b/packages/components/src/LegacyPageLayout/LegacyPageLayout.d.ts
@@ -9,6 +9,7 @@ export interface LegacyPageLayoutProps extends LegacyHeaderProps {
     userEmail?: string;
     isPlusUser?: boolean;
     isProMember?: boolean;
+    userLoading?: boolean;
     userMenuItems?: ReactNode[];
     children?: ReactNode;
 }

diff --git a/packages/components/src/LegacyPageLayout/LegacyPageLayout.tsx b/packages/components/src/LegacyPageLayout/LegacyPageLayout.tsx
@@ -15,6 +15,7 @@ export interface LegacyPageLayoutProps extends LegacyHeaderProps {
   userEmail?: string;
   isPlusUser?: boolean;
   isProMember?: boolean;
+  userLoading?: boolean;
   userMenuItems?: ReactNode[];
   children?: ReactNode;
 }
@@ -38,6 +39,7 @@ const LegacyPageLayout: React.FC<LegacyPageLayoutProps> = ({
   userEmail,
   isPlusUser,
   isProMember,
+  userLoading,
   userMenuItems,
   children,
 }) => {
@@ -63,6 +65,7 @@ const LegacyPageLayout: React.FC<LegacyPageLayoutProps> = ({
           userEmail={userEmail}
           isPlusUser={isPlusUser}
           isProMember={isProMember}
+          userLoading={userLoading}
           userMenuItems={userMenuItems}
         />
         {shouldDisplayAdUnit('T3N_M_Incontent-1') && (

diff --git a/packages/storybook/src/stories/legacy/layout/legacyHeader.stories.tsx b/packages/storybook/src/stories/legacy/layout/legacyHeader.stories.tsx
@@ -60,6 +60,7 @@ const meta: Meta<typeof LegacyHeader> = {
       'https://storage.googleapis.com/t3n-media/t3n-headercampaign-mobile.png',
     isPlusUser: true,
     isProMember: true,
+    userLoading: false,
     userEmail: '[email protected]',
   },
 };

diff --git a/packages/storybook/src/stories/legacy/layout/legacyPageLayout.stories.tsx b/packages/storybook/src/stories/legacy/layout/legacyPageLayout.stories.tsx
@@ -37,6 +37,7 @@ const meta: Meta<typeof LegacyPageLayout> = {
       'https://storage.googleapis.com/t3n-media/t3n-headercampaign-mobile.png',
     isPlusUser: true,
     isProMember: true,
+    userLoading: false,
     userEmail: '[email protected]',
     children: (
       <>