@@ -4,7 +4,7 @@ import { ConfigItem, Radius, Margin, Padding, GridColumns, BorderWidth, BorderSt
4
4
import { isValidColor , toHex } from "components/colorSelect/colorUtils" ;
5
5
import { ColorSelect } from "components/colorSelect" ;
6
6
import { TacoInput } from "components/tacoInput" ;
7
- import { Slider } from "antd" ;
7
+ import { Slider , Switch } from "antd" ;
8
8
import {
9
9
ExpandIcon ,
10
10
CompressIcon ,
@@ -27,6 +27,8 @@ export type configChangeParams = {
27
27
borderWidth ?: string ;
28
28
fontFamily ?: string ;
29
29
components ?: Record < string , object > ,
30
+ showComponentLoadingIndicators ?: boolean ;
31
+ showDataLoadingIndicators ?: boolean ;
30
32
} ;
31
33
32
34
type ColorConfigProps = {
@@ -46,6 +48,8 @@ type ColorConfigProps = {
46
48
margin ?: string ;
47
49
padding ?: string ;
48
50
gridColumns ?: string ; // Added By Aqib Mirza
51
+ showComponentLoadingIndicators ?: boolean ;
52
+ showDataLoadingIndicators ?: boolean ;
49
53
} ;
50
54
51
55
export default function ThemeSettingsSelector ( props : ColorConfigProps ) {
@@ -63,7 +67,9 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
63
67
borderStyle : defaultBorderStyle ,
64
68
borderWidth : defaultBorderWidth ,
65
69
borderColor : defaultBorderColor ,
66
- fontFamily : defaultFontFamily
70
+ fontFamily : defaultFontFamily ,
71
+ showComponentLoadingIndicators : defaultShowComponentLoaders ,
72
+ showDataLoadingIndicators : defaultShowDataLoaders ,
67
73
} = props ;
68
74
69
75
const configChangeWithDebounce = _ . debounce ( configChange , 0 ) ;
@@ -76,6 +82,8 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
76
82
const [ borderWidth , setBorderWidth ] = useState ( defaultBorderWidth ) ;
77
83
const [ borderColor , setBorderColor ] = useState ( defaultBorderColor ) ;
78
84
const [ fontFamily , setFontFamily ] = useState ( defaultFontFamily ) ;
85
+ const [ showComponentLoaders , setComponentLoaders ] = useState ( defaultShowComponentLoaders ) ;
86
+ const [ showDataLoaders , setDataLoaders ] = useState ( defaultShowDataLoaders ) ;
79
87
80
88
const varName = `(${ themeSettingKey } )` ;
81
89
@@ -229,22 +237,36 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
229
237
setFontFamily ( defaultFontFamily ) ;
230
238
} , [ defaultFontFamily ] ) ;
231
239
240
+ useEffect ( ( ) => {
241
+ setComponentLoaders ( defaultShowComponentLoaders ) ;
242
+ } , [ defaultShowComponentLoaders ] ) ;
243
+
244
+ useEffect ( ( ) => {
245
+ setDataLoaders ( defaultShowDataLoaders ) ;
246
+ } , [ defaultShowDataLoaders ] ) ;
247
+
232
248
return (
233
249
< 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 >
237
258
</ div >
238
- < div className = "desc" > { desc } </ div >
239
- </ div >
259
+ ) }
240
260
241
261
{ themeSettingKey !== "radius" &&
242
262
themeSettingKey !== "margin" &&
243
263
themeSettingKey !== "padding" &&
244
264
themeSettingKey !== "gridColumns" &&
245
265
themeSettingKey !== "borderStyle" &&
246
266
themeSettingKey !== "borderWidth" &&
247
- themeSettingKey !== "fontFamily" && (
267
+ themeSettingKey !== "fontFamily" &&
268
+ themeSettingKey !== "showComponentLoadingIndicators" &&
269
+ themeSettingKey !== "showDataLoadingIndicators" && (
248
270
< div className = "config-input" >
249
271
< ColorSelect
250
272
changeColor = { _ . debounce ( setColor , 500 , {
@@ -386,8 +408,6 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
386
408
</ div >
387
409
) }
388
410
389
-
390
-
391
411
{ themeSettingKey === "fontFamily" && (
392
412
< div className = "config-input" >
393
413
< TacoInput
@@ -398,6 +418,42 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
398
418
/>
399
419
</ div >
400
420
) }
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
+ ) }
401
457
</ ConfigItem >
402
458
) ;
403
459
}
0 commit comments