added data loading indicator types(skeleton/spinner) in theme settings

Author: raheeliftikhar5

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

@@ -79,6 +79,7 @@ export interface ThemeDetail {
   components?: Record<string, JSONObject>;
   showComponentLoadingIndicators?: boolean;
   showDataLoadingIndicators?: boolean;
+  dataLoadingIndicator?: string;
 }
 
 export function getThemeDetailName(key: keyof ThemeDetail) {

client/packages/lowcoder/src/components/ModuleLoading.tsx

@@ -1,3 +1,4 @@
+import LoadingOutlined from "@ant-design/icons/LoadingOutlined";
 import { default as Spin } from "antd/es/spin";
 import { GreyTextColor } from "constants/style";
 import styled from "styled-components";
@@ -14,7 +15,7 @@ export const LoadingPlaceholder = styled.div`
 export function ModuleLoading() {
   return (
     <LoadingPlaceholder>
-      <Spin />
+      <Spin indicator={<LoadingOutlined style={{ fontSize: 15 }} spin />} />
     </LoadingPlaceholder>
   );
 }

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

@@ -4,7 +4,7 @@ import { ConfigItem, Radius, Margin, Padding, GridColumns, BorderWidth, BorderSt
 import { isValidColor, isValidGradient, toHex } from "components/colorSelect/colorUtils";
 import { ColorSelect } from "components/colorSelect";
 import { TacoInput } from "components/tacoInput";
-import { Slider, Switch } from "antd";
+import { Segmented, Slider, Switch } from "antd";
 import { 
   ExpandIcon, 
   CompressIcon,
@@ -28,6 +28,7 @@ export type configChangeParams = {
   components?: Record<string, object>,
   showComponentLoadingIndicators?: boolean;
   showDataLoadingIndicators?: boolean;
+  dataLoadingIndicator?: string;
   gridColumns?: string;
   gridRowHeight?: string;
   gridRowCount?: number;
@@ -58,6 +59,7 @@ type ColorConfigProps = {
   padding?: string;
   showComponentLoadingIndicators?: boolean;
   showDataLoadingIndicators?: boolean;
+  dataLoadingIndicator?: string;
   gridColumns?: string;
   gridRowHeight?: string;
   gridRowCount?: number;
@@ -87,6 +89,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
     fontFamily: defaultFontFamily,
     showComponentLoadingIndicators: defaultShowComponentLoaders,
     showDataLoadingIndicators: defaultShowDataLoaders,
+    dataLoadingIndicator: defaultDataLoadingIndicator,
     gridColumns: defaultGridColumns,
     gridRowHeight: defaultGridRowHeight,
     gridRowCount: defaultGridRowCount,
@@ -110,6 +113,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
   const [fontFamily, setFontFamily] = useState(defaultFontFamily);
   const [showComponentLoaders, setComponentLoaders] = useState(defaultShowComponentLoaders);
   const [showDataLoaders, setDataLoaders] = useState(defaultShowDataLoaders);
+  const [dataLoadingIndicator, setDataLoadingIndicator] = useState(defaultDataLoadingIndicator);
   const [gridColumns, setGridColumns] = useState(defaultGridColumns); 
   const [gridRowHeight, setGridRowHeight] = useState(defaultGridRowHeight); 
   const [gridRowCount, setGridRowCount] = useState(defaultGridRowCount); 
@@ -346,6 +350,10 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
     setDataLoaders(defaultShowDataLoaders);
   }, [defaultShowDataLoaders]);
 
+  useEffect(() => {
+    setDataLoadingIndicator(defaultDataLoadingIndicator);
+  }, [defaultDataLoadingIndicator]);
+
   useEffect(() => {
     setGridPaddingX(defaultGridPaddingX);
   }, [defaultGridPaddingX]);
@@ -375,6 +383,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
         themeSettingKey !== "fontFamily" && 
         themeSettingKey !== "showComponentLoadingIndicators" && 
         themeSettingKey !== "showDataLoadingIndicators" &&
+        themeSettingKey !== "dataLoadingIndicator" &&
         themeSettingKey !== "gridColumns" &&
         themeSettingKey !== "gridRowHeight" &&
         themeSettingKey !== "gridRowCount" &&
@@ -551,6 +560,25 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
         </div>
       )}
 
+      {themeSettingKey === "dataLoadingIndicator" && (
+        <div style={{
+          marginTop: '6px',
+        }}>
+          <Segmented
+            block
+            value={dataLoadingIndicator}
+            options={[
+              { value: 'spinner', label: 'Spinner' },
+              { value: 'skeleton', label: 'Skeleton' },
+            ]}
+            onChange={(value) => {
+              setDataLoadingIndicator(value)
+              configChange({ themeSettingKey, dataLoadingIndicator: value});
+            }}
+          />
+        </div>
+      )}
+
       {themeSettingKey === "gridColumns" && (
         <div className="config-input">
           <GridColumns $gridColumns={defaultGridColumns || "24"}>

client/packages/lowcoder/src/constants/themeConstants.ts

@@ -28,6 +28,7 @@ const theme = {
   animationIterationCount: "",
   showComponentLoadingIndicators: true,
   showDataLoadingIndicators: true,
+  dataLoadingIndicatpr: 'spinner',
   gridBgImageSize: "cover",
   gridBgImagePosition: "center",
   gridBgImageRepeat: "no-repeat",

client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx

@@ -45,7 +45,6 @@ import { Card, Collapse, CollapseProps, Divider, Flex, List, Tooltip } from 'ant
 
 import { ThemeCompPanel } from "pages/setting/theme/ThemeCompPanel";
 import { JSONObject } from "@lowcoder-ee/util/jsonTypes";
-import Switch from "antd/es/switch";
 
 const ThemeSettingsView = styled.div`
   font-size: 14px;
@@ -174,7 +173,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
     this.setState({
       theme: {
         ...this.state.theme,
-        [params.themeSettingKey]: params.color || params.radius || params.chart || params.margin || params.padding  || params.borderWidth || params.borderStyle || params.fontFamily || params.showComponentLoadingIndicators || params.showDataLoadingIndicators || params.gridColumns || params.gridRowHeight || params.gridRowCount || params.gridPaddingX || params.gridPaddingY || params.gridBgImage || params.gridBgImageRepeat || params.gridBgImageSize || params.gridBgImagePosition || params.gridBgImageOrigin,
+        [params.themeSettingKey]: params.color || params.radius || params.chart || params.margin || params.padding  || params.borderWidth || params.borderStyle || params.fontFamily || params.showComponentLoadingIndicators || params.showDataLoadingIndicators || params.dataLoadingIndicator || params.gridColumns || params.gridRowHeight || params.gridRowCount || params.gridPaddingX || params.gridPaddingY || params.gridBgImage || params.gridBgImageRepeat || params.gridBgImageSize || params.gridBgImagePosition || params.gridBgImageOrigin,
       },
     });
   }
@@ -315,6 +314,13 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
             type: "showDataLoadingIndicators",
             value: this.state.theme?.showDataLoadingIndicators,
           },
+          {
+            settingsKey: 'dataLoadingIndicator',
+            name: trans('themeDetail.dataLoadingIndicator'),
+            desc: '',
+            type: "dataLoadingIndicator",
+            value: this.state.theme?.dataLoadingIndicator,
+          },
         ]
       },
     ];
@@ -782,6 +788,17 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                                   }}
                                 />
                               }
+                              {layoutSettingsItem.type == "dataLoadingIndicator" && 
+                                <ThemeSettingsSelector
+                                  themeSettingKey={layoutSettingsItem.settingsKey}
+                                  name={layoutSettingsItem.name}
+                                  dataLoadingIndicator={layoutSettingsItem.value as string}
+                                  configChange={(params) => {
+                                    this.configChange(params);
+                                  }}
+                                  showVarName={false}
+                                />
+                              }
                           </List.Item>
                           </Tooltip>
                         ))}

client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx

@@ -34,6 +34,7 @@ export const themeTemplateList = [
       padding: "3px",
       showComponentLoadingIndicators: true,
       showDataLoadingIndicators: true,
+      dataLoadingIndicator: 'spinner',
     },
   },
   {
@@ -53,6 +54,7 @@ export const themeTemplateList = [
       padding: "3px",
       showComponentLoadingIndicators: true,
       showDataLoadingIndicators: true,
+      dataLoadingIndicator: 'spinner',
     },
   },
   {
@@ -72,6 +74,7 @@ export const themeTemplateList = [
       padding: "3px",
       showComponentLoadingIndicators: true,
       showDataLoadingIndicators: true,
+      dataLoadingIndicator: 'spinner',
     },
   },
 ];