Merge branch 'dev' into feature/linking-accounts

src/Components/Navbar/NavDesktop.tsx

@@ -166,6 +166,8 @@ export default function NavDesktop() {
                 {curUser !== undefined &&
                     (curUser ?
                         <Menu
+                            align="end"
+                            offsetY={4}
                             menuClassName='!p-8 !rounded-12'
                             menuButton={<MenuButton ><Avatar src={curUser.avatar} width={40} /> </MenuButton>}>
                             <MenuItem

src/Components/Navbar/NavMobile.tsx

@@ -93,6 +93,8 @@ export default function NavMobile() {
             {curUser ?
 
               <Menu
+                align="end"
+                offsetY={4}
                 menuClassName='!p-8 !rounded-12'
                 menuButton={<MenuButton ><Avatar src={curUser.avatar} width={32} /> </MenuButton>}>
                 <MenuItem

src/Components/Navbar/Navbar.tsx

@@ -1,3 +1,4 @@
+
 import NavMobile from "./NavMobile";
 import { MdComment, MdHomeFilled, MdLocalFireDepartment } from "react-icons/md";
 import { useCallback, useEffect, } from "react";

src/features/Posts/Components/Comments/index.tsx

@@ -1 +1 @@
-export { default as CommentsSection } from './CommentsSection/CommentsSection'
+export { default } from './CommentsSection/CommentsSection'

src/features/Posts/pages/PostDetailsPage/Components/QuestionPageContent/QuestionPageContent.tsx

@@ -5,9 +5,10 @@ import styles from '../PageContent/styles.module.scss'
 import Badge from "src/Components/Badge/Badge";
 import { BiComment } from "react-icons/bi";
 import { RiFlashlightLine } from "react-icons/ri";
-import { CommentsSection } from "src/features/Posts/Components/Comments";
 import { numberFormatter } from "src/utils/helperFunctions";
+import { lazy } from "react";
 
+const CommentsSection = lazy(() => import("src/features/Posts/Components/Comments"))
 
 interface Props {
     question: Question

src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx

@@ -4,15 +4,17 @@ import { useParams } from 'react-router-dom'
 import NotFoundPage from 'src/features/Shared/pages/NotFoundPage/NotFoundPage'
 import { Post_Type, usePostDetailsQuery } from 'src/graphql'
 import { capitalize } from 'src/utils/helperFunctions'
-import { CommentsSection } from '../../Components/Comments'
 import ScrollToTop from 'src/utils/routing/scrollToTop'
-import TrendingCard from '../../Components/TrendingCard/TrendingCard'
+import TrendingCard from 'src/features/Posts/Components/TrendingCard/TrendingCard'
 import AuthorCard from './Components/AuthorCard/AuthorCard'
 import PageContent from './Components/PageContent/PageContent'
 import PostActions from './Components/PostActions/PostActions'
 import PostDetailsPageSkeleton from './PostDetailsPage.skeleton'
 import styles from './styles.module.scss'
+import { lazy, Suspense } from 'react'
+import { RotatingLines } from 'react-loader-spinner'
 
+const CommentsSection = lazy(() => import("src/features/Posts/Components/Comments"))
 
 export default function PostDetailsPage() {
     const { type: _type, id } = useParams();
@@ -60,8 +62,11 @@ export default function PostDetailsPage() {
                     </div>
                 </aside>
                 <div id="comments">
-                    <CommentsSection id={post.id} type={type as Post_Type} />
-
+                    <Suspense fallback={
+                        <div className="flex justify-center py-32"><RotatingLines strokeColor='#ddd' width="64" /></div>
+                    }>
+                        <CommentsSection id={post.id} type={type as Post_Type} />
+                    </Suspense>
                     <div className="md:hidden mt-24"><TrendingCard /></div>
                 </div>
             </div>

src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/UpdateMyProfileTab.tsx

@@ -111,7 +111,7 @@ export default function UpdateMyProfileTab({ data, onClose }: Props) {
 
     return (
         <div className="grid grid-cols-1 md:grid-cols-3 gap-24">
-            <Card className="md:col-span-2">
+            <Card className="md:col-span-2" defaultPadding={false}>
                 <div className="bg-gray-600 relative h-[160px] rounded-t-16">
                     <div className="absolute left-24 bottom-0 translate-y-1/2">
                         <Avatar src={data.avatar} width={120} />

src/utils/helperFunctions.tsx

@@ -62,8 +62,6 @@ export function lazyModal<T extends ComponentType<any>>
 }
 
 export function trimText(text: string | undefined | null, length: number) {
-  console.log(text);
-
   if (!text) return '';
   return text.slice(0, length) + (text.length > length ? "..." : "")
 }