From fb31b1acff9224d080c42e82be2904337e37bb7e Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Tue, 6 Feb 2024 02:24:29 +0700
Subject: [PATCH] fix: hydration issue, making top users card skeleton
 rendering weirdly

---
 src/components/main/PageWrapper.tsx | 7 +++----
 src/styles/subsocial.scss           | 6 ++++++
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/main/PageWrapper.tsx b/src/components/main/PageWrapper.tsx
index 886da23a6..54cf22439 100644
--- a/src/components/main/PageWrapper.tsx
+++ b/src/components/main/PageWrapper.tsx
@@ -11,7 +11,7 @@ import CreatorDashboardSidebar, {
 } from '../creators/CreatorDashboardSidebar'
 import TopUsersCard from '../creators/TopUsersCard'
 import ProgressModal from '../leaderboard/ProgressModal'
-import { useIsMobileWidthOrDevice, useResponsiveSize } from '../responsive'
+import { useIsMobileWidthOrDevice } from '../responsive'
 import { fullUrl } from '../urls/helpers'
 import Section from '../utils/Section'
 
@@ -125,7 +125,6 @@ export const PageContent: FC<Props> = ({
   // const myAddress = useMyAddress()
 
   const isMobile = useIsMobileWidthOrDevice()
-  const { isLargeDesktop } = useResponsiveSize()
   // const isPanels = leftPanel || rightPanel
 
   const sidebarStyles: ComponentProps<'div'> = {
@@ -155,8 +154,8 @@ export const PageContent: FC<Props> = ({
         </section>
       ) : (
         <div className={clsx('DfSectionOuterContainer')}>
-          {creatorDashboardSidebarType && isLargeDesktop && (
-            <div {...sidebarStyles}>
+          {creatorDashboardSidebarType && (
+            <div {...sidebarStyles} className='xl-only'>
               <div>
                 <TopUsersCard />
               </div>
diff --git a/src/styles/subsocial.scss b/src/styles/subsocial.scss
index 904e06423..62536a752 100644
--- a/src/styles/subsocial.scss
+++ b/src/styles/subsocial.scss
@@ -2264,10 +2264,16 @@ hr {
   }
 }
 
+.xl-only {
+  display: none;
+}
 @media screen and (min-width: 1200px) {
   .xl-hidden {
     display: none !important;
   }
+  .xl-only {
+    display: block;
+  }
 }
 
 .\!FontTiny {