Fix Skeleton Flickering

src/components/creators/TopUsersCard.tsx

@@ -119,6 +119,9 @@ function UserInfo({
       </div>
       <div className='d-flex flex-column' style={{ minWidth: 0 }}>
         <ViewSpaceLink
+          containerClassName='d-flex'
+          className='d-flex'
+          style={{ minWidth: 0 }}
           title={
             <span
               className='FontWeightMedium FontNormal'

src/components/main/PageWrapper.tsx

@@ -187,7 +187,7 @@ export const PageContent: FC<Props> = ({
             <div {...sidebarStyles}>
               <CreatorDashboardSidebar dashboardType={creatorDashboardSidebarType} />
               {!isLargeDesktop && (
-                <div className='mt-3'>
+                <div className='mt-3 xl-hidden'>
                   <TopUsersCard />
                 </div>
               )}

src/components/spaces/ViewSpaceLink.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import React from 'react'
+import React, { CSSProperties } from 'react'
 import { SpaceStruct } from 'src/types'
 import { spaceUrl } from '../urls'
 
@@ -9,22 +9,25 @@ type Props = {
   hint?: string
   className?: string
   containerClassName?: string
+  style?: CSSProperties
+  containerStyle?: CSSProperties
 }
 
 export const ViewSpaceLink = React.memo(
-  ({ space, title, hint, className, containerClassName }: Props) => {
+  ({ space, title, hint, className, containerClassName, containerStyle, style }: Props) => {
     if (!space.id || !title) return null
 
     return (
       <span
         className={containerClassName}
+        style={containerStyle}
         onClick={e => {
           e.stopPropagation()
           e.preventDefault()
         }}
       >
         <Link href='/[spaceId]' as={spaceUrl(space)}>
-          <a className={'DfBlackLink ' + className} title={hint}>
+          <a className={'DfBlackLink ' + className} style={style} title={hint}>
             {title}
           </a>
         </Link>

src/styles/subsocial.scss

@@ -2239,6 +2239,12 @@ hr {
   }
 }
 
+@media screen and (min-width: 1200px) {
+  .xl-hidden {
+    display: none !important;
+  }
+}
+
 .\!FontTiny {
   font-size: $font_tiny !important;
 }