[icons][docs] Virtualize icons svg

docs/data/material/components/material-icons/SearchIcons.js

@@ -25,6 +25,7 @@ import * as mui from '@mui/icons-material';
 import { Link } from '@mui/docs/Link';
 import { useTranslate } from '@mui/docs/i18n';
 import useQueryParameterState from 'docs/src/modules/utils/useQueryParameterState';
+
 // For Debugging
 // import Menu from '@mui/icons-material/Menu';
 // import MenuOutlined from '@mui/icons-material/MenuOutlined';
@@ -110,6 +111,12 @@ const StyledIcon = styled('span')(({ theme }) => ({
   },
 }));
 
+const PlaceholderIcon = styled('div')({
+  width: 69,
+  height: 69,
+  margin: '4px 0',
+});
+
 const StyledSvgIcon = styled(SvgIcon)(({ theme }) => ({
   boxSizing: 'content-box',
   cursor: 'pointer',
@@ -147,23 +154,61 @@ function handleLabelClick(event) {
   selectNode(event.currentTarget);
 }
 
+function isElmVisible(elm, margin = 0) {
+  const rect = elm.getBoundingClientRect();
+  return rect.bottom >= -margin && rect.top <= window.innerHeight + margin;
+}
+
 function Icon(props) {
-  const { icon, onOpenClick } = props;
+  const { icon, onOpenClick, initiallyVisible = false } = props;
+
+  const rootRef = React.useRef(null);
+  const [isVisible, setIsVisible] = React.useState(initiallyVisible);
+
+  // Virtualize the icons to reduce page size and React rendering time.
+  // Only render the icons after they become visible in the viewport.
+  React.useEffect(() => {
+    const margin = 200;
+    if (!rootRef.current) {
+      throw new Error('missing ref');
+    }
+    if (isElmVisible(rootRef.current, margin)) {
+      setIsVisible(true);
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (isElmVisible(entries[0].target, margin)) {
+          setIsVisible(true);
+        }
+      },
+      { rootMargin: `${margin}px 0px` },
+    );
+    observer.observe(rootRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
   /* eslint-disable jsx-a11y/click-events-have-key-events */
   return (
     <StyledIcon
       key={icon.importName}
+      ref={rootRef}
       onClick={handleIconClick}
       data-icon-theme={icon.theme}
       data-icon-name={icon.name}
     >
-      <StyledSvgIcon
-        component={icon.Component}
-        tabIndex={-1}
-        onClick={onOpenClick}
-        title={icon.importName}
-      />
-      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- TODO: a11y */}
+      {isVisible ? (
+        <StyledSvgIcon
+          component={icon.Component}
+          tabIndex={-1}
+          onClick={onOpenClick}
+          title={icon.importName}
+        />
+      ) : (
+        <PlaceholderIcon />
+      )}
+      {/*  eslint-disable-next-line jsx-a11y/no-static-element-interactions -- TODO: a11y */}
       <div onClick={handleLabelClick}>{icon.importName}</div>
       {/* eslint-enable jsx-a11y/click-events-have-key-events */}
     </StyledIcon>
@@ -175,8 +220,14 @@ const Icons = React.memo(function Icons(props) {
 
   return (
     <div>
-      {icons.map((icon) => (
-        <Icon key={icon.importName} icon={icon} onOpenClick={handleOpenClick} />
+      {icons.map((icon, i) => (
+        <Icon
+          key={icon.importName}
+          icon={icon}
+          onOpenClick={handleOpenClick}
+          // Render the first 50 icons immediately as they would be visible on page load
+          initiallyVisible={i < 50}
+        />
       ))}
     </div>
   );