Skip to content

Commit 1e3d6a6

Browse files
authoredSep 8, 2024
Merge pull request #1146 from lowcoder-org/update-loaders
Update loaders
2 parents 2569950 + ae1cb0e commit 1e3d6a6

File tree

16 files changed

+203
-73
lines changed

16 files changed

+203
-73
lines changed
 

‎client/packages/lowcoder-design/src/components/Loading.tsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import styled, { css } from "styled-components";
22
import { CSSProperties } from "react";
3+
import { default as Skeleton } from "antd/es/skeleton";
34

45
type LoadingContainerProps = {
56
$backgroundColor: string;
@@ -12,6 +13,8 @@ const LoadingWrapper = styled.div`
1213
flex-direction: column;
1314
align-items: center;
1415
justify-content: center;
16+
width: 100%;
17+
height: 100%;
1518
`;
1619

1720
// Loading
@@ -61,6 +64,10 @@ const Load2 = styled.div<LoadingContainerProps>`
6164
linear-gradient(to right, ${(props) => props.$color}a3, ${(props) => props.$color}1a);
6265
`;
6366

67+
const StyledSkeleton = styled(Skeleton)`
68+
height: 100%;
69+
`;
70+
6471
type LoadingProps = {
6572
backgroundColor?: string;
6673
color?: string;
@@ -77,14 +84,15 @@ export const Loading = (props: LoadingProps) => {
7784
};
7885
return (
7986
<LoadingWrapper className={props.className} style={props.style}>
80-
<ContainerX {...loadingProps}>
87+
{/* <ContainerX {...loadingProps}>
8188
<Container {...loadingProps}>
8289
<Load1 {...loadingProps} />
8390
</Container>
8491
<Container {...loadingProps}>
8592
<Load2 {...loadingProps} />
8693
</Container>
87-
</ContainerX>
94+
</ContainerX> */}
95+
<StyledSkeleton active style={{height: '100%', animationDuration: '2s'}} />
8896
</LoadingWrapper>
8997
);
9098
};

‎client/packages/lowcoder-design/src/components/button.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import Button, { ButtonProps } from "antd/es/button";
2+
import Spin from "antd/es/spin";
3+
import LoadingOutlined from "@ant-design/icons/LoadingOutlined"
24
import styled, { css } from "styled-components";
35
import { Loading } from "./Loading";
46
import * as React from "react";
@@ -206,10 +208,10 @@ const TacoButton = forwardRef(
206208
{props.icon}
207209
{props.children}
208210
</span>
209-
<Loading
211+
<Spin
212+
size="small"
213+
indicator={<LoadingOutlined spin style={{color: 'white'}} />}
210214
style={loadingStyle}
211-
backgroundColor={loadingBackground}
212-
color={loadingColor}
213215
/>
214216
</>
215217
) : (

‎client/packages/lowcoder/index.html

+2-26
Original file line numberDiff line numberDiff line change
@@ -57,32 +57,8 @@
5757
<noscript>You need to enable JavaScript to run this app.</noscript>
5858
<div id="loading">
5959
<div class="loading-content">
60-
<svg
61-
width="56px"
62-
height="56px"
63-
viewBox="0 0 64 64"
64-
version="1.1"
65-
xmlns="http://www.w3.org/2000/svg"
66-
xmlns:xlink="http://www.w3.org/1999/xlink"
67-
>
68-
<defs>
69-
<pattern id="pattern-1" width="100%" height="100%" patternUnits="objectBoundingBox">
70-
<use xlink:href="#image-2"></use>
71-
</pattern>
72-
<image
73-
id="image-2"
74-
width="64"
75-
height="64"
76-
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAQKADAAQAAAABAAAAQAAAAABGUUKwAAAZVElEQVR4AaWay44dyXGG63JuTc5wMBwDnuHC3nkxI/gp9FaGIa2thR7BgO2dXkEbP4BWFgwDEmDYEjQGaJEzHPbtnLr4+/6oOn3YJAUBru5zMiszMjL+PyIjs6q7/Yef/9M/dk3XzPPczm3Tto0Xtbnl3pK2rvpb6rYpNiugOG22lrwNrY3tNM8dtXZ2PI3oRIk6S6Zppq766G2apa4c2hbZKEN8mqfSRR8KawrqJau+jFF56Q+WTJ7ZlKsP1sfsDEB2bju/p2ZCi2PhAcnqTr/mz800pZXuRS5WaInwM6TGIRZtaHDcZQ/3Z5lF2zuFJnrFwqrmFtZiPjcR6WKlX0VujA3yGCxC7sIqRqjCr8inoKbVStkJsxlRJNiuCfbQInhhRD0hYtlM/KYfH1YttkQPZETGfq4ayhivqFvq3jxiI9ZEcKl1iKDNJhkwWtTOONpsXgpqRrBXmKKaQauQYCWRVqYUwQK+s9J2gpFLWxMJKwmK0qKd1i5J0LsZE1lVFhw58ypLq+3ckIpfhTx2nduqEpCpahxGL0hoWurVEGNRICrBrctXKzU0ZcyocSGQey11rJQFAXWWwGL80nJJQiJA9TGqBAW/jnHku1FAn2Sk3RmR9FqIsYIx1ZaOR18L4PJ8G88+RIGOYniAC73GOqOgyvzFNRTpLhkn1JLIXYJXXVfj0V0q1HWOBKZw7KrdqZMPxEPtA1FAD78OWKHJn4yEmLXxI+WC6dzLuEDRiMQgPTEw6mLCgpNiDX0mWvRYaMhHwauNCJBjgRVFTPBBElBFe8xQJGMkTcsuoyDTCVhRZghZKyFLuYTUGWhVFOdS5cX6tyUdSX7WuVPxYgHSNRUglH34aO4DePNEQVt0SCXV5IAVEGqdX6T8vh8JqjuTsNQrGhjASE1JmKsgNcx5fNEesx63X9w7/Qoyzd6rPcAF0OA5d1Vdl++FbyUiFXB+2fvONq+uBbxjN9EprwYqZfKp89XoZmonoaoW0/ldZefJ6YWtCZk5k+dGO1Bha8blW1LSYecHL43D3DjCkUgvM1aTYJiT1KzWLA/2saadYgt2OqYMKPMX8KKhp4iNfrSkxW0wELh1JOGcNZwRAnNkyoIvB7UzMFXkMy46tDEQEfJc4a1Jz2jlUgFX5kvt8ZfcMEgSHi7UpLnIcDJVZNIIO0BoOkJTLehPrTyvmRljm+qiP3Jq3sQ2FXCHgFqpJLzUmOHvl8rYh4ZgxivOqha9YGu8YW9Ur8C5newXVi4Bx661gXIhodpV6wB+CmfgOkO1lLJMLYBYzF3CPhYqX+CXMc4kkxmzYUg4mDnuai4W0k2v9WVGOXyXBGdd26ypkB/kgBciKALejSbCDjlfzvJwi2BAJvqVKSOiF81YISnWGKUsP7l9RIJThxYtQYKLEbFelIxSU82Vb9o2zKKuBXBpV6rAryRY0oeOh1J9S1t8pnWxLASEv0AhhygYmilz+M6caXGuXNqGQWVlLJXDutWaqM6Cz7TOxnyOykcnpKXAK65CxRTSOxGOvHpRJfBEABPVPkp7/LZGg2qCZC3fJUHA+fDkozp6gyK0aWa0qSEd9pGwHEOVC5OKhHNTJcDqjUSGaKhgmMORGBPlmd370s/D1wq+zKQ/E2UMX7nRBMmgdGDlAL3aue5j6iOwzGB7QlkDWCk8nnGAUkG+WHAdp4g8/Zn/UK21khmLnZKPdi5TWGuzgVJZLUsnClHKYDXnR1U0VBGb06fxGqBixjwCz/hz9CCnrrPXY4m6Uek2qHHMyZcNBQpHCG4lhNsIRdR5m24yTZL4nFhhJCKTqSJeyOhwlGnVfu6cahmgyPkSEFf29xgUxagPQCe1Bvl++/MYfAFTnikyTsuiP7Bony56S0XLczi/0uUnlSrDiJrwaZoFgBBilNSpASp94S4bgTOLk6kUF6iSyOtvqnLA5V5btfp2GslheKZ0YoE6NM10YfFk/AkKo2m2VMSJYmrA2+9gSo2E0/SHhDDvALrV7hIIcO2JTz0IaSedtkBO7FeXuCgzUjOd31zC0cFIcF6kEHJHRE0Ua7bC/HjWlp4odDyjvTIuIupYNNMb+JlkwaUgzdFte8AzBEsK0KIscihiAi4tiJbMuNTXATkJCg2JzIjaDxChqctzI1BNn7EdNPKVadccoGvxDmrykRCxOSIRw1TeaZ4DuVJql0Ix2SoN1LUzdpuzI2nB5wE8E9CXzKqm2BYtDvRWPWmw7uzeaJxF23AQiqcKiSsiMypQESF4rpJKPYZmOL4w5QnJMCsSkudF6MUUAcMtP5qJ4HqWXCRShCEtYlwsi4Eh+AxWYg3Q8nyIDha0Ckm0oU17NDulElVfgNOwCDuuIQmmP5GJdYzUBJ0hcxonQXW84QbMNLsSEdVU5PQOnldvcHLvAG/jGYmh07zAF+8CHaYutS+XuwviyqlX9uVKY/m1voKveTQDUUchrRcjm0lV4biPAFeGKyY1RkDCNPeJ3ZjlYBEWEcyGEFaHCC2XKPVEuF4o1kvQZDf6NUziSVvRoj3C1s4JJmzFTscHiFUlbLbViqV63ge/AFcmP2d9jtNOSxEyXInU+RYECpdR1poN0yCvSwssbTZwKtW56UoZqGfbaFdNFEdn8Z82u5S+9HvJMDwcIyxGqddKRTFand6FvADnvsqkj6BRWmOJkMXrGRvmFuJWPVHsFyrRm9/YzT1lJmYX6Jqec1x10JouZg3oDNUztFNniAONGEf7yTgqIorzM6EdjjGKIsZ3fnxbLkAnNMjV6gV4dShDjzoCkvkkrEcgRDiWTrW6zJzGW+XfqdsQb1uxLw2uyjSspVayDUaUL9YfJ+DSWaNChi1FkLZoIJNq/DnzEtPUdSH9Gl6lFiBqs79OxnCPMT4cTOc37ZkgAaRWEhyAmQG7AF7gGViRkO01cwgCVSJayBNozRHIwRoEF6Dtz63YMY565QDUd71A1UmfRiFwcQ6ga0S8SHAGrpqwEiQNhmTGmqU1FRU22lMjqKqTzqlnInNHyK1ZGdEKWLBtwCMj8LQxdokKgWuARTQvdoQRDac9H4pzGVMyqpoypQLZBejl17kkwczNbACQEeTp9Qrjqbjh0R4DRJE8Z3dSnjTKQKzDHClAV00CXe4C3UjTxs2jtEYoXue+R3ZjJDB7T1nAU5YcJqn/bFDZoj1csUs82s7v4vWlWUMiVyBNglgRz684y39OoLZ8h5QKe9sy1gmcQYnQ5KHYu5ogNb7U3SewgVwBpNLJ580R+Az1nnAXLJ6nvqWJ5Cx4lwFRYDwJN5MvZSFavL8ALvSxz27BCiAjdOZaX/pMWyyBhHUCAHtXfwe4Hipyooe6SqSGaKHuUFGrWRLqVu/QxjofSVqgIkXMfaW+sIZBsDzhZe0uIABvAD7vmGmLehYknywJRxZo7c9MlIsDbHF6myOkQbnny5aQkFPK2hwMC59ZAuXrCoBLoGc1RQZKHpQbusxp7stEWmiITHlpCSqnhhATJABkEo/rdetElHaTgGVYzzc7dO9p20HfVs9DYo8WrXYJrICDQlD0aIGzB2Q68mW713JDERIKxRl4ySQCFgLWlioXcW9EbhTGs745O1+aV+3VZBSUNqjQI3ojxspHMrvpYqB5RJvIDky0xZtPuH2CzVtUrN4XgTBFyKcgM6OK0yUwZ86tleU21Yuvh/6HxormRABO+sjFXpUJmkbHhe6HPxRjfn7P2rWmxJelIvNcMiY1FuLnYbGZ79B2a43rb+l8Tv8Webyut8WUARLHtdStXlznqc9tZ+Fzy8cqReLHIyDjdOHHFMhH2fq+RClPiiPYzSNBpK58cCgvVKYTzP9bP21++vbtd398/nw8/frX++nHP/58+sUvftF88803mfunP/2Joy8nSftlw/+j3rY/+/k//30pqEA4g+a2Wt5XTxJbjFjGEM+rLJylr5JrkiiZ0HVPGHj86dthHtsTNzfQ+0f22z90Y/fH4/H+pus+Od7dvSTcNqjbTc+f/zC/evXl/NVXr+df/appXrz4Nrq//vrrGY6W64GstWUtf/ITyQv5a5N3F3Xufvbzf/m7d1ouYWMGK24BW1IrQO88zRUZeNvEjuk+UbPGs2pZCmwUEsIRuAPm3IykxNM0jUdkbjhOvCH9fzdtKMf+ZpqO98OT7nR1msbv++3UvPp+ar76q+nZ9e385s117FhJcf4QYyXk/A39/+pdrpBk7UxU3ayRFSG+zk+DawPGAqq86PLN6f3S4wshK1jjJID1MPLxdJ5re4NCBizN/CObxsD7oxPJ755BkMCfJjecCVj/x3bY77pd01/fdUO3HXa349juOTe9/sN0ao2Iu/np00+JiP387Fkzv/n8ev72v3bNj57/5dz86LfNq1cvIeBrpvp3iPlqfv36dfu5oPh68UJyvL7xKyEgQd7US1HUa+Ua2nGa93jVg+g8st59V1JXnns8nqhLDydHEw5GC5s3uz7AM8jHBEB2DVvgPPK/PgPgT+TCE7EwkvMn0Lo/btj/NqdumrbNoYGC9pPttr25OUBcD2+b6XD4dLreH+eraUM0vJyfjp/O11/dzq++/V3z7NmX8/fPft989uZzbPrr5v7+h9i6/03TfPHiS+ovAV3ELBiaX/7ydYggArCbM5e5GqOKiIDTfQAHVI66Sc5CbrE8bycRXh6DlIQhAod/Z/KBz52lw3DVEQ5Nx6mPmGm7AdoG1PJgAXjeDIz431EUPfxsfMF44Cw0NadmvtpOOzMGl0fH+bqdbw/dfJg38/V1FzJuiYxxvJtfNH/RXDe3AT4MX86/a37ffPGFhFy3z42S5jnE3Le/kZQvvpxfvCgqOHJi8ZrCYIGDum856SW0dTtDPQV4/LeP2UIKVOBwwwJoGL0mOho8vzKYZjtZAg7qAV9LAP4IBrZ7yYEWWvmjxNCeekjgKamdjky4HTfNhijZ7JrmxlUJAbvp7byfP5/u593cfHac5/thbp5/Nk+391jnNWSZQEj72bOnZJhj++zZ5/MwvG1/1wyJkC++UG4l5bcsAb2WZfEAuMcp2JUICGhQ1e5gQpQcSiJddFqfAIAEwXP2BbcRAC38WOnmfpymgQmMCoZlPyBocPqGM4Y+nje8mjBEuqnvu+OM/4mDfXOEzc3trTEA41fT3d3btnnWT8+OT2eJ+Gw8Un6KXa9x8gUZ3z6QcQ0Jn337FLuLECn4z+E/WpcMr8UxhwYDeATBCljfuqZFlVyQAKeu22hnCB/Oe/67HzpYFjPEEdMOMKQEPwU8iXAkO9ij10l8jCIjqNuz3zSMbQ8JU9vDpn9z2XR7picA5h4G7nxmxQivZnuYdrcDssM0f8pqOqJ2Ps2Hw26+G08YPMx3T/D+7TUGnOZPPiFXfPvfrQlU4EbH9bPbMyHZBQIa3axJUUWw7Xga9V6wqNWvbGX28XkAnnoICWrXPf0L+K6HF5ToeQSZPsTwdyXWPnqTGUhx+BrPA1EGyZO1e85DT3ZkyR2IhLvmPobpxxPECIb1w3J9EgJMuvv7Kyi9bZtRQvbz1dW+ecmOe3V1cPNpJePly5esgOZMyMZVjrYovARtq6dyTu1GeIW6u5khwFX+U8hwV4VRIfAQ5HriI2g/NlfdsWrM6drQs6MjAvjxP0JJBKQFw2qHEAtBcS5JaBcSKiMx0XSglzxA9l6JMBKa/Y7D9m37SiLun6Lgun1CVLx8WWSo7/rJgc3hJe8DOraZ2KjlyMbhVPB2soNr3M0OPBqTNY9oHllcFjDBVinIEEDXQop4BvjynaN0keT59kWLOuYcCTTFa0swnGAPtRyZsApdLClXxDggLH9eez73fNT0hKlYAnjez3HHWeF4174hKnbfDVkSRcT/tofDFeeHEyXb6NXT5pWqXv4PkfGUHMCF53wVUd4m9KkY9ZTWk+ry5MubDe4BYW88bhFeAj66EhEsUaw0CkRtZnfJL5xi7tj0JDf2vsw+TkSAiwdBkoVvatuBh0b2lk4STID3fIZh7K4ggXw5Wd9sNpwb6jpxxNhtecJm19hB6B1l890AaHIDEbGHOz9ERWtUNId94xJh2QUThlC5rAuUkEhYi8xLew0THcAVkiiV8V6gHoQUs89IBpTQgVKDBO2HYGdcXQGxIHEvHEkQuJcMUmeEO6SJdwD3bpaornpzM3bX1L1v5h+67ZZN7QdO3OaRN2O3223bOz7zd0O339+2ENHu7/jsr1O/udn5/wEYySu6GJyzr8FKkiLs3NmCmYNS5QJKcWgDl4eZHBKoC15ijAhgEbPtRPJm3bAx2CYNgHY4a5Ytm7dxOX1xRw5gwrbvt+1pGFK2nBBJguR9s4MXpLQnyJm6E6Rux52EsKOQFJlwe2Rd70ZJmI/bjYHQHHd3TfOG88PuMD9ExImIII6+JyIO1+s5wC34XeA9NEhCgXXN+7puBZiT4zkECjxEkkx0vQHB/CzNWu+chGnTUfax20DEOA6IsA7Ol3lgbLfbbSMJHP2YklLgR6PiFjZ8V0aS3ErCMSTMPFJtn/S1FI7sJ0F+T8kZ4od7wO/JD3fN7o6kt/uBpUGZpVFE5M/jnNLwENZjPAGMu0BK0WUHWL0OGJrXI+8a/z3ndIEZiMatHjaCsJzIwvu0CZ5XoJAieHgZKE1wXDwZsvmQi4kCXhOyT5MPBG8MsQSOrNKJp4Om55kCMg4SgsvbKx8ojqz2XTOwFE4h4dgcOTrKwTVxd44G8uZbcsrutJ3ND28hooEQj9yuyBh9DndQMj8wMLwnNYmI+wK/OD031kVd4D3+2pyHIUoyugOj3eWPR9HL6tTxH7k6wEuI3T4juDSMgjwo9CwFloT5YCQXzLfkgcGccGzNDURCd8Pporl5m7ywOR7bEzlhe7xvWRIpzRFEQ7s7bokM88Mt7sPqnAJZtgL1sUVUBRwSjGxDArkAFlduGcVaDD9poxGA2O6dzwOpE7bzKStiRBWxIZkmFKLhvYtEuOWnYQmwKbpYWPcUPLVzmKY8ccghEA6HvF1NNEDoaVORYGSc1HHqqzwem9MOnx8JAfLCcXvf7O7ZCpBZl0UOQixVjNPL5lr2oHe8Xtui6AJtJQKwtlDAjIeHIs3QDyu2QR37O7lOzTL5HuQ0+EBkeLeEKaKukyQ+358mB3jwza7aB/gegiTidIBK0GzeIwFCTgAHKGsieeGGqomS8wLr45plQo7Y88B19jqeCQgj4Bzy0kI4B4JAlygQvCSZ2MjwysAh38iyYnGcj9fc4XXzi+SAjCGY4Rr4CBO6pl7AUnrtyAmSA1CSyR6SekweeHDgtjmwUzSbExofkQBG/E1kuOIrL2xubj4QDb4QwfAHrxsKmspl4hIQE9X9u+AZk/cegQ0PPkJvaNP7RkFyHvG1Avepz/An86ffR4QPXxsS4xGG2naH5z18TSZG/mQykD2NiH4APo/Lw4E8AZ/9AAm8QduwtWY54P1aCpDAtrA9HZsblsB2XRK8ZNhemw+MAL2zeh2k7uDlaUng93yv2/W8h5hUAUvnBhWApol26KDiY5FH3kqLFT+e2L3iex09cSZgfFb42m6zYLf8qYAOngkQdxfg4mmRRyuaAe3uyXG5dylwAh656Vn/w3b4KAlPhnGGBJJh5YsbbDA3sEU/hPwD+KC4IKMQX4IPcXi88gW4qRu9yftET+6x0+yv/d6vbVkFNlIhWpOUrPhQlFVAk9uhXeMESK7ee/a3gVcnnCGIAl4vsysMLAOJcGfoT9xvhva8O3BiOm02vGtjR6CfSMjOcDzStuwSWEUE4L1az3rvzwTvGERdiwJftwNv3FiNUhCfwSv2wSsMCLQAK7PWJcE9vQO0xHhE9njsTj+yPY4A75cTo49JbOx5arT8EAkc/t0hOB+wxJ48aSQB+AVew/8UePNdsoJLJuD1vv7m4sv5veOpvuoIYXG2CXXDBe2DD58prX/ocgnY7nkgKZHEUclQ8A9R0BsFnA18QBS80VCgT0SFf270OjQ5J5wjwYggCiRhiQZQYLDvK0WB0YFE6b1Gm8UFb6Rglm4o3Qs4wzqPPwGo980RRULCH5xGw593CdmPr0g4Ggc8U7IMbK0oIEcQBQ37u5fhX0vB0qhwKUACIb8ZODdIAmA3IeHUXjVXJsqQwAO1GxZgRbiAH5dIEHzIAWjsN1fo/XTUGDuW3gvvgzjkFAkaKUmeAH0GWO8t1wtnYyj7xLIMPBFWclBVLYMxa9/whwpzgeEPESNRcF4K7+SDCxJYEh8kAZLyPPanwOtNuQh4S+5DGI2PvS8hkTeqQpyh/0DE40AghEPISoTlmhRXMvR8RUJ53ONxnhcSBTXSQ826FHwJ4pKopCgJlRTNC++RQGSABiD8xPOCBVh5nNd53j8CX8Ccwd8CqJSk5L/mF5RGirtGBBEPER9e9oVi+c5OsNaNiBzn0MIy6HyKMgLeiwKTYS2FtZQEQV/uDB8iIRDP4AGr/bXdBRbAWPt4MxdlgFYgZO3XEuB7EcmaQmsNqPXP7fl+XQZrfwF6uLO2JsLkgSUpxv8casr7D1GwbovrUnBbdHn4MR8I2veJl5HgHGtO4FUIoEKDUbCCN7wr6XkIybpH5jL0zfYCC02L99fkt0aJXvdTjr/81oR3L58HkujOzSyGdYuEhDwdXiTDNQoUrwdgy4elYGLM+QASTiRF18hKgjuD4yTh/wCIYnYv9JXl4QAAAABJRU5ErkJggg=="
77-
></image>
78-
</defs>
79-
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
80-
<g fill="url(#pattern-1)" fill-rule="nonzero">
81-
<path
82-
d="M32,0 C49.673112,0 64,14.326888 64,32 C64,49.673112 49.673112,64 32,64 C14.326888,64 0,49.673112 0,32 C0,14.326888 14.326888,0 32,0 Z M32,10 C19.8497355,10 10,19.8497355 10,32 C10,44.1502645 19.8497355,54 32,54 C44.1502645,54 54,44.1502645 54,32 C54,19.8497355 44.1502645,10 32,10 Z"
83-
></path>
84-
</g>
85-
</g>
60+
<svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="3em" height="3em" fill="#1677FF" aria-hidden="true">
61+
<path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
8662
</svg>
8763
</div>
8864
</div>

‎client/packages/lowcoder/src/api/commonSettingApi.ts

+2
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,8 @@ export interface ThemeDetail {
6666
boxShadowColor?: string;
6767
animationIterationCount?: string;
6868
components?: Record<string, JSONObject>;
69+
showComponentLoadingIndicators?: boolean;
70+
showDataLoadingIndicators?: boolean;
6971
}
7072

7173
export function getThemeDetailName(key: keyof ThemeDetail) {

‎client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx

+66-10
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { ConfigItem, Radius, Margin, Padding, GridColumns, BorderWidth, BorderSt
44
import { isValidColor, toHex } from "components/colorSelect/colorUtils";
55
import { ColorSelect } from "components/colorSelect";
66
import { TacoInput } from "components/tacoInput";
7-
import { Slider } from "antd";
7+
import { Slider, Switch } from "antd";
88
import {
99
ExpandIcon,
1010
CompressIcon,
@@ -27,6 +27,8 @@ export type configChangeParams = {
2727
borderWidth?: string;
2828
fontFamily?: string;
2929
components?: Record<string, object>,
30+
showComponentLoadingIndicators?: boolean;
31+
showDataLoadingIndicators?: boolean;
3032
};
3133

3234
type ColorConfigProps = {
@@ -46,6 +48,8 @@ type ColorConfigProps = {
4648
margin?: string;
4749
padding?: string;
4850
gridColumns?: string; // Added By Aqib Mirza
51+
showComponentLoadingIndicators?: boolean;
52+
showDataLoadingIndicators?: boolean;
4953
};
5054

5155
export default function ThemeSettingsSelector(props: ColorConfigProps) {
@@ -63,7 +67,9 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
6367
borderStyle: defaultBorderStyle,
6468
borderWidth: defaultBorderWidth,
6569
borderColor: defaultBorderColor,
66-
fontFamily: defaultFontFamily
70+
fontFamily: defaultFontFamily,
71+
showComponentLoadingIndicators: defaultShowComponentLoaders,
72+
showDataLoadingIndicators: defaultShowDataLoaders,
6773
} = props;
6874

6975
const configChangeWithDebounce = _.debounce(configChange, 0);
@@ -76,6 +82,8 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
7682
const [borderWidth, setBorderWidth] = useState(defaultBorderWidth);
7783
const [borderColor, setBorderColor] = useState(defaultBorderColor);
7884
const [fontFamily, setFontFamily] = useState(defaultFontFamily);
85+
const [showComponentLoaders, setComponentLoaders] = useState(defaultShowComponentLoaders);
86+
const [showDataLoaders, setDataLoaders] = useState(defaultShowDataLoaders);
7987

8088
const varName = `(${themeSettingKey})`;
8189

@@ -229,22 +237,36 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
229237
setFontFamily(defaultFontFamily);
230238
}, [defaultFontFamily]);
231239

240+
useEffect(() => {
241+
setComponentLoaders(defaultShowComponentLoaders);
242+
}, [defaultShowComponentLoaders]);
243+
244+
useEffect(() => {
245+
setDataLoaders(defaultShowDataLoaders);
246+
}, [defaultShowDataLoaders]);
247+
232248
return (
233249
<ConfigItem className={props.className}>
234-
<div className="text-desc">
235-
<div className="name">
236-
{name} {showVarName && <span>{varName}</span>}
250+
{themeSettingKey !== "showDataLoadingIndicators"
251+
&& themeSettingKey !== "showComponentLoadingIndicators"
252+
&& (
253+
<div className="text-desc">
254+
<div className="name">
255+
{name} {showVarName && <span>{varName}</span>}
256+
</div>
257+
<div className="desc">{desc}</div>
237258
</div>
238-
<div className="desc">{desc}</div>
239-
</div>
259+
)}
240260

241261
{themeSettingKey !== "radius" &&
242262
themeSettingKey !== "margin" &&
243263
themeSettingKey !== "padding" &&
244264
themeSettingKey !== "gridColumns" &&
245265
themeSettingKey !== "borderStyle" &&
246266
themeSettingKey !== "borderWidth" &&
247-
themeSettingKey !== "fontFamily" && (
267+
themeSettingKey !== "fontFamily" &&
268+
themeSettingKey !== "showComponentLoadingIndicators" &&
269+
themeSettingKey !== "showDataLoadingIndicators" && (
248270
<div className="config-input">
249271
<ColorSelect
250272
changeColor={_.debounce(setColor, 500, {
@@ -386,8 +408,6 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
386408
</div>
387409
)}
388410

389-
390-
391411
{themeSettingKey === "fontFamily" && (
392412
<div className="config-input">
393413
<TacoInput
@@ -398,6 +418,42 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
398418
/>
399419
</div>
400420
)}
421+
{themeSettingKey === "showComponentLoadingIndicators" && (
422+
<div style={{
423+
display: 'flex',
424+
gap: '6px',
425+
lineHeight: 'normal',
426+
}}>
427+
<Switch
428+
size="small"
429+
checked={showComponentLoaders}
430+
onChange={(value) => {
431+
debugger;
432+
setComponentLoaders(value)
433+
configChange({ themeSettingKey, showComponentLoadingIndicators: value});
434+
}}
435+
/>
436+
<span>{name}</span>
437+
</div>
438+
)}
439+
440+
{themeSettingKey === "showDataLoadingIndicators" && (
441+
<div style={{
442+
display: 'flex',
443+
gap: '6px',
444+
lineHeight: 'normal',
445+
}}>
446+
<Switch
447+
size="small"
448+
checked={showDataLoaders}
449+
onChange={(value) => {
450+
setDataLoaders(value)
451+
configChange({ themeSettingKey, showDataLoadingIndicators: value});
452+
}}
453+
/>
454+
<span>{name}</span>
455+
</div>
456+
)}
401457
</ConfigItem>
402458
);
403459
}

‎client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx

-4
Original file line numberDiff line numberDiff line change
@@ -111,10 +111,6 @@ const DivStyled = styled.div`
111111
> div:first-child {
112112
margin-bottom: 6px;
113113
}
114-
115-
.tooltipLabel {
116-
white-space: nowrap;
117-
}
118114
119115
}
120116
// custom styles for icon selector

‎client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx

+8-5
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@ import { GreyTextColor } from "constants/style";
55
import log from "loglevel";
66
import { Comp, CompAction, CompConstructor, CompParams, customAction, isCustomAction } from "lowcoder-core";
77
import { WhiteLoading } from "lowcoder-design";
8-
import { useState } from "react";
8+
import { useContext, useState } from "react";
99
import { useMount } from "react-use";
1010
import styled from "styled-components";
11-
import { RemoteCompInfo, RemoteCompLoader } from "types/remoteComp";
11+
import { RemoteCompInfo } from "types/remoteComp";
1212
import { withErrorBoundary } from "comps/generators/withErrorBoundary";
13+
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
1314

1415
const ViewError = styled.div`
1516
display: flex;
@@ -52,6 +53,8 @@ interface LazyCompViewProps {
5253
function LazyCompView(props: React.PropsWithChildren<LazyCompViewProps>) {
5354
const { loadComp, loadingElement, errorElement } = props;
5455
const [error, setError] = useState<any>("");
56+
const currentTheme = useContext(ThemeContext)?.theme;
57+
const showComponentLoadingIndicators = currentTheme?.showComponentLoadingIndicators;
5558

5659
useMount(() => {
5760
setError("");
@@ -71,14 +74,14 @@ function LazyCompView(props: React.PropsWithChildren<LazyCompViewProps>) {
7174
);
7275
}
7376

77+
if (!showComponentLoadingIndicators) return<></>;
78+
7479
if (loadingElement) {
7580
return <ViewLoadingWrapper>{loadingElement()}</ViewLoadingWrapper>;
7681
}
7782

7883
return (
79-
<ViewLoadingWrapper>
80-
<WhiteLoading />
81-
</ViewLoadingWrapper>
84+
<WhiteLoading />
8285
);
8386
}
8487

0 commit comments

Comments
 (0)