From 36bce20b3899959051b74f0c73e90df63c5089ce Mon Sep 17 00:00:00 2001
From: Christian Helgeson <62450112+cmhhelgeson@users.noreply.github.com>
Date: Fri, 19 Jan 2024 11:58:15 -0800
Subject: [PATCH] CSS: Animated Resizing of .panelContents when Window Size is
 less than 768 pixels. (#344)

* Updated css for expanding list of samples when window size is less than 768px. React state updates were making this animation unperformant on all but the least intensive webgpu samples 'which was basically only helloTriangle'. Accordingly, I reworked the panelContents portion of the _app component, with css changes only occurring on window size changes or when toggling the expand button

* fixed issue with panelContents disappearing on link click

* Added helpful comments

* Changed function names from stylePanel to stylePanelContents to better reflect the element/ref they are directly modifying

* Fixed bug where max-height was visibly changing on resize to greater than 768 pixels

* Removed most code for simpler solution

* Made sure display: block was explicit at normal window width

* got rid of useEffect import

* Removed unecessary function. I definitely overcomplicated the original solution. All that's really needed to make this performant is a few css changes and changing data-Expanded from a React state variable that triggers a re-render to an attribute on a ref

* Added back effect so data-expanded would be set to false on window resize

* added semicolon

* Memoized component

* Removed unusued functions
---
 src/pages/MainLayout.module.css | 26 +++++++++++++++++++++-----
 src/pages/_app.tsx              |  9 ++++++---
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/pages/MainLayout.module.css b/src/pages/MainLayout.module.css
index 2374f5aa..c60673fb 100644
--- a/src/pages/MainLayout.module.css
+++ b/src/pages/MainLayout.module.css
@@ -18,7 +18,9 @@
 }
 
 .exampleList {
-  padding: 0
+  padding: 0;
+  margin-block-start: 16px;
+  margin-block-end: 16px;
 }
 
 .exampleList li {
@@ -40,6 +42,13 @@
   background-size: cover;
 }
 
+.panel .panelContents {
+  display: block;
+  transition: max-height 0s;
+  overflow: none;
+  max-height: 100vh;
+}
+
 @media only screen and (max-width: 768px) {
   /* More padding on mobile for easier touch screen use */
   .exampleLink {
@@ -55,12 +64,19 @@
     height: auto;
   }
 
-  .panel[data-expanded=false] .panelContents {
-    display: none;
+  .panel .panelContents {
+    display: block;
+    transition: max-height 0.3s ease-out;
+    overflow: hidden;
+    max-height: 0px;
+  }
+
+  .panel[data-expanded='false'] .panelContents {
+    max-height: 0vh;
   }
 
-  .panel[data-expanded=true] .panelContents {
-    display: block;
+  .panel[data-expanded='true'] .panelContents {
+    max-height: 100vh;
   }
 
   .expand {
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 2257d5f3..d01f075c 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -2,7 +2,7 @@ import Head from 'next/head';
 import { AppProps } from 'next/app';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useState } from 'react';
+import { useMemo, memo, useState } from 'react';
 
 import './styles.css';
 import styles from './MainLayout.module.css';
@@ -21,9 +21,12 @@ const MainLayout: React.FunctionComponent<AppProps> = ({
 }) => {
   const router = useRouter();
   const samplesNames = Object.keys(pages);
-
   const [listExpanded, setListExpanded] = useState<boolean>(false);
 
+  const ComponentMemo = useMemo(() => {
+    return memo(Component);
+  }, [Component]);
+
   const oldPathSyntaxMatch = router.asPath.match(/(\?wgsl=[01])#(\S+)/);
   if (oldPathSyntaxMatch) {
     const slug = oldPathSyntaxMatch[2];
@@ -107,7 +110,7 @@ const MainLayout: React.FunctionComponent<AppProps> = ({
             </ul>
           </div>
         </nav>
-        <Component {...pageProps} />
+        <ComponentMemo {...pageProps} />
       </div>
     </>
   );