Merge pull request #640 from SUI-Components/feat/content-visibility

feat(components/perf/dynamicRendering): add content-visibility property

components/perf/dynamicRendering/src/index.js

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types'
 
-import LazyContent from './lazyContent'
+import LazyContent from './lazyContent.js'
+
+import './index.scss'
 
 const BOTS_USER_AGENTS = [
   'googlebot',
@@ -40,19 +42,15 @@ export default function PerfDynamicRendering({
   // so check if we're on the browser side and if is not disabled the component
   if (isOnBrowser && !disabled) {
     return (
-      <LazyContent
-        rootMargin={rootMargin}
-        placeholder={placeholder}
-        height={height}
-      >
+      <LazyContent rootMargin={rootMargin} placeholder={placeholder} height={height}>
         {children}
       </LazyContent>
     )
   } else if (placeholder) {
     // so, we're on the server side or the component is disabled
     return placeholder
   } else {
-    return <div style={{height: `${height}px`, marginBottom: '1px'}} />
+    return <div style={{containIntrinsicSize: `auto ${height}px`, height: `${height}px`, marginBottom: '1px'}} />
   }
 }
 

components/perf/dynamicRendering/src/index.scss

@@ -1 +1,3 @@
-// EMPTY. Keep to get studio working as expected
+.sui-PerfDynamicRendering-placeholder {
+  content-visibility: auto;
+}