Add suspense and lazy load to VersionHistory

Author: Blargian

src/theme/SettingsInfoBlock/styles.module.css

@@ -17,7 +17,7 @@
     position: relative;
     width: 170px;
     height: 80px;
-    z-index: 1;
+    z-index: 0;
     overflow: hidden;
     border-radius: 5px;
     margin-bottom: 15px;

src/theme/VersionHistory/VersionHistory.js

@@ -1,36 +1,59 @@
 import { Accordion, Table} from '@clickhouse/click-ui/bundled'
 import styles from './styles.module.css';
+import React, {Suspense} from 'react'
+import BrowserOnly from '@docusaurus/BrowserOnly';
 
-const VersionHistoryDropdown = ({rows=[]}) => {
-    return(
-            <div
-                className={styles.versionHistory}
-            >
-                <Accordion
-                    color="default"
-                    title="Version history"
-                    size="sm"
-                    gap="md"
-                >
-                    <Table
-                        headers={[
-                            {
-                                label: 'Version'
-                            },
-                            {
-                                label: 'Default value'
-                            },
-                            {
-                                label: 'Comment'
-                            }
-                        ]}
-                        rows={rows}
-                        size="sm"
-                        className={styles.table}
-                    ></Table>
-                </Accordion>
-            </div>
-    )
+const Table = React.lazy(() => import('@clickhouse/click-ui/bundled').then(module => ({
+    default: module.Table
+})));
+
+const Accordion = React.lazy(() => import('@clickhouse/click-ui/bundled').then(module => ({
+    default: module.Accordion
+})));
+
+function VersionHistoryPlaceholder() {
+    return (
+        <div className={styles.wrapper}>
+            <div className={styles.activity}></div>
+        </div>
+    );
 }
+const VersionHistoryDropdown = ({ rows = [] }) => {
+    return (
+        <BrowserOnly fallback={<VersionHistoryPlaceholder />}>
+            {() => {
+                return (
+                    <div className={styles.versionHistory}>
+                        <Suspense fallback={<VersionHistoryPlaceholder />}>
+                            <Accordion
+                                color="default"
+                                title="Version history"
+                                size="sm"
+                                gap="md"
+                            >
+                                <Table
+                                    headers={[
+                                        {
+                                            label: 'Version'
+                                        },
+                                        {
+                                            label: 'Default value'
+                                        },
+                                        {
+                                            label: 'Comment'
+                                        }
+                                    ]}
+                                    rows={rows}
+                                    size="sm"
+                                    className={styles.table}
+                                ></Table>
+                            </Accordion>
+                        </Suspense>
+                    </div>
+                );
+            }}
+        </BrowserOnly>
+    );
+};
 
 export default VersionHistoryDropdown

src/theme/VersionHistory/styles.module.css

@@ -11,3 +11,51 @@
     display: block;
     margin-bottom: 0px;
 }
+
+.wrapper {
+    position: relative;
+    width: 100px;
+    height: 18px;
+    z-index: 0;
+    overflow: hidden;
+    border-radius: 5px;
+    margin-bottom: 15px;
+}
+
+[data-theme='dark'] .wrapper {
+    background-color: rgb(46,46,41);
+}
+
+[data-theme='light'] .wrapper {
+    background-color: rgb(245,245,245);
+}
+
+.activity {
+    position: absolute;
+    left: -45%;
+    height: 100%;
+    width: 45%;
+    animation: loading 1s infinite;
+    z-index: 45;
+}
+
+[data-theme='dark'] .activity {
+    background-image: linear-gradient(to left, rgba(31,31,28, .05), rgba(31,31,28, .3), rgba(31,31,28, .6), rgba(31,31,28, .3), rgba(31,31,28, .05));
+    background-image: -moz-linear-gradient(to left, rgba(31,31,28, .05), rgba(31,31,28, .3), rgba(31,31,28, .6), rgba(31,31,28, .3), rgba(31,31,28, .05));
+    background-image: -webkit-linear-gradient(to left, rgba(31,31,28, .05), rgba(31,31,28, .3), rgba(31,31,28, .6), rgba(31,31,28, .3), rgba(31,31,28, .05));
+}
+
+[data-theme='light'] .activity {
+    background-image: linear-gradient(to left, rgba(227,227,227, .05), rgba(227,227,227, .3), rgba(227,227,227, .6), rgba(227,227,227, .3), rgba(227,227,227, .05));
+    background-image: -moz-linear-gradient(to left, rgba(227,227,227, .05), rgba(227,227,227, .3), rgba(227,227,227, .6), rgba(227,227,227, .3), rgba(227,227,227, .05));
+    background-image: -webkit-linear-gradient(to left, rgba(227,227,227, .05), rgba(227,227,227, .3), rgba(227,227,227, .6), rgba(227,227,227, .3), rgba(227,227,227, .05));
+}
+
+@keyframes loading {
+    0% {
+        left: -45%; /* Start off-screen to the left */
+    }
+    100% {
+        left: calc(100% + 45%); /* Move off-screen to the right */
+    }
+}