From e239abf031d3b9d66a528c9fc23ef79960afa727 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 15 Aug 2022 10:08:52 +0300
Subject: [PATCH 1/2] fix: remove default padding form edit-profile card

---
 .../EditProfilePage/UpdateMyProfileTab/UpdateMyProfileTab.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/UpdateMyProfileTab.tsx b/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/UpdateMyProfileTab.tsx
index 42fda77..9f354a6 100644
--- a/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/UpdateMyProfileTab.tsx
+++ b/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} />

From 3c9af29efc9dce844b391c0a7880057553536741 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Tue, 16 Aug 2022 15:49:51 +0300
Subject: [PATCH 2/2] fix: profile menu alignment, lazy load comments section,
 remove log from trimFunc

---
 src/Components/Navbar/NavDesktop.tsx                |  2 ++
 src/Components/Navbar/NavMobile.tsx                 |  2 ++
 src/Components/Navbar/Navbar.tsx                    |  1 +
 src/features/Posts/Components/Comments/index.tsx    |  2 +-
 .../QuestionPageContent/QuestionPageContent.tsx     |  3 ++-
 .../Posts/pages/PostDetailsPage/PostDetailsPage.tsx | 13 +++++++++----
 src/utils/helperFunctions.tsx                       |  2 --
 7 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/Components/Navbar/NavDesktop.tsx b/src/Components/Navbar/NavDesktop.tsx
index 2b2d625..5bbc318 100644
--- a/src/Components/Navbar/NavDesktop.tsx
+++ b/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
diff --git a/src/Components/Navbar/NavMobile.tsx b/src/Components/Navbar/NavMobile.tsx
index 3ed8a1d..08fadad 100644
--- a/src/Components/Navbar/NavMobile.tsx
+++ b/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
diff --git a/src/Components/Navbar/Navbar.tsx b/src/Components/Navbar/Navbar.tsx
index b1d9f32..e871110 100644
--- a/src/Components/Navbar/Navbar.tsx
+++ b/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";
diff --git a/src/features/Posts/Components/Comments/index.tsx b/src/features/Posts/Components/Comments/index.tsx
index d7f4694..2c748fc 100644
--- a/src/features/Posts/Components/Comments/index.tsx
+++ b/src/features/Posts/Components/Comments/index.tsx
@@ -1 +1 @@
-export { default as CommentsSection } from './CommentsSection/CommentsSection'
\ No newline at end of file
+export { default } from './CommentsSection/CommentsSection'
\ No newline at end of file
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/QuestionPageContent/QuestionPageContent.tsx b/src/features/Posts/pages/PostDetailsPage/Components/QuestionPageContent/QuestionPageContent.tsx
index df7d528..22ef15d 100644
--- a/src/features/Posts/pages/PostDetailsPage/Components/QuestionPageContent/QuestionPageContent.tsx
+++ b/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
diff --git a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx
index 06c9417..a8875ee 100644
--- a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx
+++ b/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>
diff --git a/src/utils/helperFunctions.tsx b/src/utils/helperFunctions.tsx
index 1703ba0..f842ac8 100644
--- a/src/utils/helperFunctions.tsx
+++ b/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 ? "..." : "")
 }