Merge pull request #2324 from daostack/bugfix/CW-2318-avatar-blinking

Blinking space's letters avatar on loading #2318

src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.tsx

@@ -1,11 +1,9 @@
 import React, { FC } from "react";
-import { NavLink } from "react-router-dom";
 import classNames from "classnames";
-import { useRoutesContext } from "@/shared/contexts";
-import { useIsTabletView } from "@/shared/hooks/viewport";
 import { SidebarIcon, StarIcon } from "@/shared/icons";
 import { CommonAvatar, TopNavigationOpenSidenavButton } from "@/shared/ui-kit";
 import { getPluralEnding } from "@/shared/utils";
+import { ContentWrapper } from "./components";
 import styles from "./HeaderCommonContent.module.scss";
 
 interface HeaderCommonContentProps {
@@ -26,28 +24,14 @@ const HeaderCommonContent: FC<HeaderCommonContentProps> = (props) => {
     memberCount,
     showFollowIcon = false,
   } = props;
-  const { getCommonPageAboutTabPath } = useRoutesContext();
-  const isTabletView = useIsTabletView();
-
-  const ContentWrapper: FC = ({ children }) =>
-    isTabletView ? (
-      <div className={styles.commonLink}>{children}</div>
-    ) : (
-      <NavLink
-        className={styles.commonLink}
-        to={getCommonPageAboutTabPath(commonId)}
-      >
-        {children}
-      </NavLink>
-    );
 
   return (
     <div className={styles.container}>
       <TopNavigationOpenSidenavButton
         className={styles.openSidenavButton}
         iconEl={<SidebarIcon className={styles.openSidenavIcon} />}
       />
-      <ContentWrapper>
+      <ContentWrapper className={styles.commonLink} commonId={commonId}>
         <CommonAvatar
           name={commonName}
           src={commonImage}

src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/components/ContentWrapper/ContentWrapper.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from "react";
+import { NavLink } from "react-router-dom";
+import { useRoutesContext } from "@/shared/contexts";
+import { useIsTabletView } from "@/shared/hooks/viewport";
+
+interface ContentWrapperProps {
+  className?: string;
+  commonId: string;
+}
+
+const ContentWrapper: FC<ContentWrapperProps> = (props) => {
+  const { className, commonId, children } = props;
+  const isTabletView = useIsTabletView();
+  const { getCommonPageAboutTabPath } = useRoutesContext();
+
+  return isTabletView ? (
+    <div className={className}>{children}</div>
+  ) : (
+    <NavLink className={className} to={getCommonPageAboutTabPath(commonId)}>
+      {children}
+    </NavLink>
+  );
+};
+
+export default ContentWrapper;

src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/components/ContentWrapper/index.ts

@@ -0,0 +1 @@
+export { default as ContentWrapper } from "./ContentWrapper";

src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/components/index.ts

@@ -0,0 +1 @@
+export * from "./ContentWrapper";