fix: hydration issue, making top users card skeleton rendering weirdly

dappforce · Feb 5, 2024 · fb31b1a · fb31b1a
1 parent d2089d3
commit fb31b1a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git 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
@@ -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 {