improve perf

mui · Sep 12, 2023 · ec9f35f · ec9f35f
1 parent f94a4d3
commit ec9f35f
Show file tree

Hide file tree

Showing 4 changed files with 912 additions and 845 deletions.
diff --git a/docs/pages/joy-ui.tsx b/docs/pages/joy-ui.tsx
@@ -86,15 +86,25 @@ export default function Core() {
           <JoyUIHero />
           <JoyUISummary />
           <Divider />
-          <JoyUITemplates />
+          <Box sx={{ contentVisibility: 'auto', containIntrinsicSize: '1000px' }}>
+            <JoyUITemplates />
+          </Box>
           <Divider />
-          <JoyUIComponents />
+          <Box sx={{ contentVisibility: 'auto', containIntrinsicSize: '1000px' }}>
+            <JoyUIComponents />
+          </Box>
           <Divider />
-          <JoyUIFeatures />
+          <Box sx={{ contentVisibility: 'auto', containIntrinsicSize: '1000px' }}>
+            <JoyUIFeatures />
+          </Box>
           <Divider />
-          <JoyUITestimonial />
+          <Box sx={{ contentVisibility: 'auto', containIntrinsicSize: '1000px' }}>
+            <JoyUITestimonial />
+          </Box>
           <Divider />
-          <JoyUIEnd />
+          <Box sx={{ contentVisibility: 'auto', containIntrinsicSize: '1000px' }}>
+            <JoyUIEnd />
+          </Box>
           <Divider />
         </main>
       </CssVarsProvider>

diff --git a/docs/src/components/productJoyUI/HeroShowcase.tsx b/docs/src/components/productJoyUI/HeroShowcase.tsx
@@ -53,8 +53,8 @@ export function Desktop() {
               '1px 1px 0 6px rgba(var(--joy-palette-primary-mainChannel) / 0.5), 1px 1px 0 10px rgba(var(--joy-palette-primary-lightChannel) / 0.2)',
           },
         },
-        animation: 'rotate-left 1.5s ease forwards',
-        animationDelay: '1s',
+        animation: 'rotate-left 1s ease forwards',
+        animationDelay: '0.5s',
       }}
     >
       <OrderDashboardApp />
@@ -103,8 +103,8 @@ export function Mobile() {
               '-1px 1px 0 6px rgba(var(--joy-palette-primary-mainChannel) / 0.5), -1px 1px 0 10px rgba(var(--joy-palette-primary-lightChannel) / 0.2)',
           },
         },
-        animation: 'rotate-right 1.5s ease forwards',
-        animationDelay: '1s',
+        animation: 'rotate-right 1s ease forwards',
+        animationDelay: '0.5s',
       }}
     >
       <JoySheet