Merge pull request #238 from dappforce/improvement/progress-modal

Fix top users card rendering weird skeleton because of hydration issue
dappforce · Feb 5, 2024 · 1972570 · 1972570
2 parents f71da4d + fb31b1a
commit 1972570
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 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>
@@ -202,11 +201,9 @@ export const PageContent: FC<Props> = ({
           {rightPanel === undefined && creatorDashboardSidebarType && (
             <div {...sidebarStyles}>
               <CreatorDashboardSidebar dashboardType={creatorDashboardSidebarType} />
-              {!isLargeDesktop && (
-                <div className='mt-3 xl-hidden'>
-                  <TopUsersCard />
-                </div>
-              )}
+              <div className='mt-3 xl-hidden'>
+                <TopUsersCard />
+              </div>
               {/* <OnBoardingSidebar hideOnBoardingSidebar={() => setShowOnBoardingSidebar(false)} /> */}
             </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 {