Skip to content

Commit bc87dd1

Browse files
BlargianBlargian
authored
Merge pull request #3783 from Blargian/fix_settings_cls
add lazy loading to settings defaults and type block
2 parents dc539e0 + f233952 commit bc87dd1

File tree

5 files changed

+198
-63
lines changed

5 files changed

+198
-63
lines changed

‎placeholderReset.sh

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
#! ./bin/bash
2-
echo "Copying API placeholder files over generated content"
2+
echo "Copying placeholder files over generated content"
33
PLACEHOLDER=docs/_placeholders
44
DOCS=docs
5-
cp $PLACEHOLDER/api/_invitations-api-reference.md $DOCS/cloud/manage/api/invitations-api-reference.md
6-
cp $PLACEHOLDER/api/_keys-api-reference.md $DOCS/cloud/manage/api/keys-api-reference.md
7-
cp $PLACEHOLDER/api/_members-api-reference.md $DOCS/cloud/manage/api/members-api-reference.md
8-
cp $PLACEHOLDER/api/_organizations-api-reference.md $DOCS/cloud/manage/api/organizations-api-reference.md
9-
cp $PLACEHOLDER/api/_services-api-reference.md $DOCS/cloud/manage/api/services-api-reference.md
105

116
cp $PLACEHOLDER/changelog/_index.md $DOCS/whats-new/changelog/index.md
127
echo "Copying completed"

‎src/theme/SettingsInfoBlock/SettingsInfoBlock.js

Lines changed: 48 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,56 @@
1-
import { Accordion, Table, Container } from '@clickhouse/click-ui/bundled'
21
import styles from './styles.module.css';
2+
import React, {Suspense} from 'react'
3+
import BrowserOnly from '@docusaurus/BrowserOnly';
4+
5+
const Table = React.lazy(() => import('@clickhouse/click-ui/bundled').then(module => ({
6+
default: module.Table
7+
})));
8+
9+
function SettingsInfoBlockPlaceholder() {
10+
// Create a placeholder with similar dimensions to the actual table
11+
return (
12+
<div className={styles.wrapper}>
13+
<div className={styles.activity}></div>
14+
</div>
15+
);
16+
}
317

418
const SettingsInfoBlock = ({type, default_value}) => {
519
return(
6-
<div
7-
className={styles.settingsInfoBlock}
8-
>
9-
<Table
10-
headers={[
11-
{
12-
label: 'Type'
13-
},
14-
{
15-
label: 'Default value'
16-
},
17-
]}
18-
rows={
19-
[
20+
<BrowserOnly fallback={<SettingsInfoBlockPlaceholder />}>
21+
{() => {
22+
return <div
23+
className={styles.settingsInfoBlock}
24+
>
25+
<Suspense fallback={<SettingsInfoBlockPlaceholder />}>
26+
<Table
27+
headers={[
28+
{
29+
label: 'Type'
30+
},
2031
{
21-
id: "row-1",
22-
items: [
23-
{label: `${type}`},
24-
{label: `${default_value}`}
25-
]
26-
}
27-
]
28-
}
29-
size="sm"
30-
className={styles.table}
31-
></Table>
32-
</div>
32+
label: 'Default value'
33+
},
34+
]}
35+
rows={
36+
[
37+
{
38+
id: "row-1",
39+
items: [
40+
{label: `${type}`},
41+
{label: `${default_value}`}
42+
]
43+
}
44+
]
45+
}
46+
size="sm"
47+
className={styles.table}
48+
>
49+
</Table>
50+
</Suspense>
51+
</div>
52+
}}
53+
</BrowserOnly>
3354
)
3455
}
3556

‎src/theme/SettingsInfoBlock/styles.module.css

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,51 @@
1212
display: block;
1313
margin-bottom: 0px;
1414
}
15+
16+
.wrapper {
17+
position: relative;
18+
width: 170px;
19+
height: 80px;
20+
z-index: 0;
21+
overflow: hidden;
22+
border-radius: 5px;
23+
margin-bottom: 15px;
24+
}
25+
26+
[data-theme='dark'] .wrapper {
27+
background-color: rgb(46,46,41);
28+
}
29+
30+
[data-theme='light'] .wrapper {
31+
background-color: rgb(245,245,245);
32+
}
33+
34+
.activity {
35+
position: absolute;
36+
left: -45%;
37+
height: 100%;
38+
width: 45%;
39+
animation: loading 1s infinite;
40+
z-index: 45;
41+
}
42+
43+
[data-theme='dark'] .activity {
44+
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));
45+
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));
46+
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));
47+
}
48+
49+
[data-theme='light'] .activity {
50+
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));
51+
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));
52+
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));
53+
}
54+
55+
@keyframes loading {
56+
0% {
57+
left: -45%; /* Start off-screen to the left */
58+
}
59+
100% {
60+
left: calc(100% + 45%); /* Move off-screen to the right */
61+
}
62+
}

‎src/theme/VersionHistory/VersionHistory.js

Lines changed: 53 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,59 @@
11
import { Accordion, Table} from '@clickhouse/click-ui/bundled'
22
import styles from './styles.module.css';
3+
import React, {Suspense} from 'react'
4+
import BrowserOnly from '@docusaurus/BrowserOnly';
35

4-
const VersionHistoryDropdown = ({rows=[]}) => {
5-
return(
6-
<div
7-
className={styles.versionHistory}
8-
>
9-
<Accordion
10-
color="default"
11-
title="Version history"
12-
size="sm"
13-
gap="md"
14-
>
15-
<Table
16-
headers={[
17-
{
18-
label: 'Version'
19-
},
20-
{
21-
label: 'Default value'
22-
},
23-
{
24-
label: 'Comment'
25-
}
26-
]}
27-
rows={rows}
28-
size="sm"
29-
className={styles.table}
30-
></Table>
31-
</Accordion>
32-
</div>
33-
)
6+
const Table = React.lazy(() => import('@clickhouse/click-ui/bundled').then(module => ({
7+
default: module.Table
8+
})));
9+
10+
const Accordion = React.lazy(() => import('@clickhouse/click-ui/bundled').then(module => ({
11+
default: module.Accordion
12+
})));
13+
14+
function VersionHistoryPlaceholder() {
15+
return (
16+
<div className={styles.wrapper}>
17+
<div className={styles.activity}></div>
18+
</div>
19+
);
3420
}
21+
const VersionHistoryDropdown = ({ rows = [] }) => {
22+
return (
23+
<BrowserOnly fallback={<VersionHistoryPlaceholder />}>
24+
{() => {
25+
return (
26+
<div className={styles.versionHistory}>
27+
<Suspense fallback={<VersionHistoryPlaceholder />}>
28+
<Accordion
29+
color="default"
30+
title="Version history"
31+
size="sm"
32+
gap="md"
33+
>
34+
<Table
35+
headers={[
36+
{
37+
label: 'Version'
38+
},
39+
{
40+
label: 'Default value'
41+
},
42+
{
43+
label: 'Comment'
44+
}
45+
]}
46+
rows={rows}
47+
size="sm"
48+
className={styles.table}
49+
></Table>
50+
</Accordion>
51+
</Suspense>
52+
</div>
53+
);
54+
}}
55+
</BrowserOnly>
56+
);
57+
};
3558

3659
export default VersionHistoryDropdown

‎src/theme/VersionHistory/styles.module.css

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,51 @@
1111
display: block;
1212
margin-bottom: 0px;
1313
}
14+
15+
.wrapper {
16+
position: relative;
17+
width: 100px;
18+
height: 18px;
19+
z-index: 0;
20+
overflow: hidden;
21+
border-radius: 5px;
22+
margin-bottom: 15px;
23+
}
24+
25+
[data-theme='dark'] .wrapper {
26+
background-color: rgb(46,46,41);
27+
}
28+
29+
[data-theme='light'] .wrapper {
30+
background-color: rgb(245,245,245);
31+
}
32+
33+
.activity {
34+
position: absolute;
35+
left: -45%;
36+
height: 100%;
37+
width: 45%;
38+
animation: loading 1s infinite;
39+
z-index: 45;
40+
}
41+
42+
[data-theme='dark'] .activity {
43+
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));
44+
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));
45+
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));
46+
}
47+
48+
[data-theme='light'] .activity {
49+
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));
50+
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));
51+
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));
52+
}
53+
54+
@keyframes loading {
55+
0% {
56+
left: -45%; /* Start off-screen to the left */
57+
}
58+
100% {
59+
left: calc(100% + 45%); /* Move off-screen to the right */
60+
}
61+
}

0 commit comments

Comments
 (0)