docs(motion): demo Collapse + Stagger + Skeleton

Author: robertpenner

packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDefault.stories.tsx

@@ -1,6 +1,25 @@
-import { Field, makeStyles, tokens, Switch, PresenceComponentProps } from '@fluentui/react-components';
-import { Collapse } from '@fluentui/react-motion-components-preview';
+import {
+  Field,
+  makeStyles,
+  tokens,
+  Switch,
+  PresenceComponentProps,
+  Skeleton,
+  SkeletonItem,
+} from '@fluentui/react-components';
+import {
+  Blur,
+  Collapse,
+  CollapseDelayed,
+  CollapseRelaxed,
+  ScaleRelaxed,
+  Slide,
+  SlideRelaxed,
+} from '@fluentui/react-motion-components-preview';
 import * as React from 'react';
+import { PresenceStagger, Stagger } from '../Experiments/Stagger';
+import { SlideUnder } from '../Experiments/SlideUnder';
+import { Hold, Series } from '../Experiments/Series';
 
 const useClasses = makeStyles({
   container: {
@@ -11,6 +30,7 @@ const useClasses = makeStyles({
   card: {
     gridArea: 'card',
     padding: '10px',
+    overflow: 'hidden',
   },
   controls: {
     display: 'flex',
@@ -27,6 +47,28 @@ const useClasses = makeStyles({
   },
 });
 
+const useStyles = makeStyles({
+  invertedWrapper: {
+    backgroundColor: tokens.colorNeutralBackground1,
+  },
+  firstRow: {
+    alignItems: 'center',
+    display: 'grid',
+    paddingBottom: '10px',
+    position: 'relative',
+    gap: '10px',
+    gridTemplateColumns: 'min-content 80%',
+  },
+  secondThirdRow: {
+    alignItems: 'center',
+    display: 'grid',
+    paddingBottom: '10px',
+    position: 'relative',
+    gap: '10px',
+    gridTemplateColumns: 'min-content 20% 20% 15% 15%',
+  },
+});
+
 const LoremIpsum = () => (
   <>
     {'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '.repeat(
@@ -37,8 +79,73 @@ const LoremIpsum = () => (
 
 export const Default = (props: React.ComponentProps<typeof Collapse>) => {
   const classes = useClasses();
+  const styles = useStyles();
+
   const [visible, setVisible] = React.useState<boolean>(false);
 
+  const RowMotion = () => (
+    <Slide.In>
+      <div className={styles.firstRow}>
+        <SkeletonItem shape="circle" size={24} />
+        <SkeletonItem shape="rectangle" size={16} />
+      </div>
+    </Slide.In>
+  );
+
+  const SkeletonRowCustom = () => (
+    <div className={styles.firstRow}>
+      <SkeletonItem shape="circle" size={28} />
+      <SkeletonItem shape="rectangle" size={20} />
+    </div>
+  );
+
+  const ContentRow = ({
+    index = 0,
+    text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+  }: { index?: number; text?: string } = {}) => (
+    <div key={index} className={styles.firstRow}>
+      <div style={{ width: '28px', height: '28px', backgroundColor: 'grey', borderRadius: '50%' }} />
+      <div style={{ width: '100%', height: '28px', paddingTop: '5px' }}>{text}</div>
+    </div>
+  );
+
+  const ContentRowPresence = ({ visible = false }: { visible?: boolean }) => (
+    // <ScaleRelaxed visible={visible} duration={1000}>
+    // <div>
+    // <Blur visible={visible} enterDuration={700} radius="50px">
+    <SlideUnder visible={visible}>
+      <div className={styles.firstRow}>
+        {visible ? <ContentRow /> : <div style={{ width: '100%', height: '28px' }} />}
+      </div>
+    </SlideUnder>
+    // </Blur>
+    // </div>
+    // </ScaleRelaxed>
+  );
+
+  const SkeletonRowPresence = ({ visible = false }: { visible?: boolean }) => (
+    // <ScaleRelaxed visible={visible} duration={1000}>
+    // <div>
+    // <Blur visible={visible} enterDuration={700} radius="50px">
+    <SlideUnder visible={visible}>
+      {visible ? (
+        <div style={{ height: '36px' }}>
+          <Series>
+            <Hold duration={3000}>
+              <SkeletonRowCustom />
+            </Hold>
+            <Slide.In>{ContentRow()}</Slide.In>
+          </Series>
+        </div>
+      ) : (
+        <div style={{ width: '100%', height: '36px' }} />
+      )}
+    </SlideUnder>
+    // </Blur>
+    // </div>
+    // </ScaleRelaxed>
+  );
+
   return (
     <div className={classes.container}>
       <div className={classes.controls}>
@@ -47,11 +154,24 @@ export const Default = (props: React.ComponentProps<typeof Collapse>) => {
         </Field>
       </div>
 
-      <Collapse visible={visible}>
+      <CollapseDelayed visible={visible} unmountOnExit animateOpacity={false}>
         <div className={classes.card}>
-          <LoremIpsum />
+          {
+            <Skeleton>
+              <PresenceStagger delay={70} mode={visible ? 'enterReverse' : 'exitReverse'}>
+                <SkeletonRowPresence />
+                <SkeletonRowPresence />
+                <SkeletonRowPresence />
+                <SkeletonRowPresence />
+                <SkeletonRowPresence />
+                <SkeletonRowPresence />
+                <SkeletonRowPresence />
+                <SkeletonRowPresence />
+              </PresenceStagger>
+            </Skeleton>
+          }
         </div>
-      </Collapse>
+      </CollapseDelayed>
     </div>
   );
 };