perf(mdx): optimize mdx related components render performance (#827)

close #826

components/Article/ArticleContent.tsx

@@ -1,5 +1,4 @@
 import MDX from '@components/MDX';
-import { Ease } from '@components/Motion';
 import type { Post } from '@types';
 import { MDXRemote } from 'next-mdx-remote';
 
@@ -8,9 +7,7 @@ interface Props {
 }
 
 const ArticleContent = ({ source }: Props): JSX.Element => (
-  <Ease>
-    <MDXRemote {...source} components={MDX} />
-  </Ease>
+  <MDXRemote {...source} components={MDX} />
 );
 
 export default ArticleContent;

components/Article/__snapshots__/Article.test.tsx.snap

@@ -163,15 +163,11 @@ exports[`Article should render correctly (snapshot) 1`] = `
     <div
       class="container relative block h-full mx-auto my-0 p-auto max-w-screen-lg px-6"
     >
-      <div
-        style="opacity: 0;"
+      <h2
+        class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light mt-24"
       >
-        <h2
-          class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light mt-24"
-        >
-          1 Basic Notes
-        </h2>
-      </div>
+        1 Basic Notes
+      </h2>
       <div
         class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center mx-0 my-12 leading-relaxed tracking-wide font-extrabold dark:border-light dark:text-light"
         role="separator"
@@ -586,15 +582,11 @@ exports[`Article should render correctly with partial data (snapshot) 1`] = `
     <div
       class="container relative block h-full mx-auto my-0 p-auto max-w-screen-lg px-6"
     >
-      <div
-        style="opacity: 0;"
+      <h2
+        class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light mt-24"
       >
-        <h2
-          class="ant-typography mb-6 after:ml-1 hover:after:content-['#'] hover:after:text-primary dark:text-light mt-24"
-        >
-          1 Basic Notes
-        </h2>
-      </div>
+        1 Basic Notes
+      </h2>
       <div
         class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center mx-0 my-12 leading-relaxed tracking-wide font-extrabold dark:border-light dark:text-light"
         role="separator"

components/Motion/Ease.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import Ease from './Ease';
+
+describe('Ease', () => {
+  test('should render correctly (snapshot)', () => {
+    const { container } = render(
+      <Ease>
+        <div>Ease</div>
+      </Ease>
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

components/Motion/__snapshots__/Ease.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Ease should render correctly (snapshot) 1`] = `
+<div>
+  <div
+    style="opacity: 0;"
+  >
+    <div>
+      Ease
+    </div>
+  </div>
+</div>
+`;