hi all,
i am facing performance issue with angular when i am laving larger ui schema with data
current behaviour:
it will struck for some time until it renders completely ,
i am using g angular, angular material
there is any solution to solve this
Hi @KarThikCh-dev,
We need some more information from you:
- How does your schema / uischema look like?
- Which version of JSON Forms are you using?
- Did you do any performance analysis to check where the time was spent?
hi @sdirix
here is my sample uischema
{
"type": "FlexLayout",
"options": {
"classes": "flex-col h-[100%] gap-y-4 relative"
},
"elements": [
{
"type": "GridLayout",
"options": {
"classes": "items-center gap-y-3 "
},
"elements": [
{
"type": "FlexLayout",
"options": {
"size": 12
},
"elements": [
{
"type": "Control",
"scope": "#/properties/userImage",
"options": {
"display_type": "Image",
"classes": "h-[45px] w-[45px]",
"styles": "border-radius:100%; object-fit: cover;"
}
},
{
"type": "FlexLayout",
"options": {
"classes": "justify-between items-center"
},
"elements": [
{
"type": "GridLayout",
"options": {
"size": 12,
"classes": " items-center "
},
"elements": [
{
"type": "Control",
"scope": "#/properties/userName",
"options": {
"display_type": "Text",
"classes": "text-SectionSubtitle/Semibold",
"size": 12
}
},
{
"type": "FlexLayout",
"options": {
"size": 12,
"classes": "justify-start items-center"
},
"elements": [
{
"type": "Control",
"scope": "#/properties/userIndustry",
"options": {
"display_type": "Text",
"classes": "text-Label/Semibold"
}
},
{
"type": "Control",
"options": {
"display_type": "Divider",
"orientation": "vertical",
"classes": "h-[13px]"
}
},
{
"type": "Control",
"options": {
"display_type": "Text",
"classes": "text-Label/Regular",
"data_calculation": {
"jsonDataTransformFn": "return params['userExperience'] ? `${params['userExperience']} years of experience` : '1 years of experience';"
}
}
}
]
}
]
}
]
}
]
},
{
"type": "Control",
"scope": "#/properties/postTitle",
"options": {
"size": 12,
"display_type": "Text",
"classes": "bg-clip-text text-transparent bg-gradient-to-b from-[#8075FA] to-[#6ABBEE] text-SectionSubtitle/Semibold"
}
},
{
"type": "Control",
"scope": "#/properties/postDescription",
"options": {
"size": 12,
"display_type": "Text",
"classes": " overflow-hidden text-SectionSubtitle/Regular"
}
},
{
"type": "FlexLayout",
"options": {
"size": 12,
"classes": "justify-between "
},
"elements": [
{
"type": "FlexLayout",
"options": {
"classes": "!gap-0 border-[1px] rounded-md px-3 py-1 transform translate-y-1 hover:text-white hover:bg-neutral-700 focus:outline-none focus:ring-2 transform translate-y-1 hover:translate-y-0 duration-500 ease-in-out drop-shadow-md border-[1px] rounded-md px-3 py-1 "
},
"elements": [
{
"type": "Control",
"scope": "#/properties/noOfLikes",
"label": "",
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/isLiked",
"schema": {
"const": true
}
}
},
"options": {
"display_type": "Text",
"showLabel": true,
"classes": "text-Label/Semibold no-of-likes",
"icon": "thumb_up",
"iconClasses": "material-symbols-outlined like-icon text-[20px] !h-fit !w-fit text-[#3290ED]",
"childClasses": "bg-#2d3133 rounded-lg self-start ",
"labelPosition": "left",
"IsTypeActon": true,
"action_type": "workflow",
"workflow_action": "userLikesManagement"
}
},
{
"type": "Control",
"scope": "#/properties/noOfLikes",
"label": "",
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/isLiked",
"schema": {
"const": false
}
}
},
"options": {
"display_type": "Text",
"showLabel": true,
"classes": "text-Label/Semibold no-of-likes",
"icon": "thumb_up",
"iconClasses": "material-symbols-outlined like-icon text-[20px] !h-fit !w-fit ",
"childClasses": "bg-#2d3133 self-start ",
"labelPosition": "left",
"IsTypeActon": true,
"action_type": "workflow",
"workflow_action": "userLikesManagement",
"data_calculation": {
"jsonDataTransformFn": "return (params?.noOfLikes);"
}
}
}
]
},
{
"type": "FlexLayout",
"options": {
"classes": "gap-x-2 "
},
"elements": [
{
"type": "Control",
"scope": "/properties/commentCount",
"label": "",
"options": {
"display_type": "Text",
"showLabel": true,
"classes": "text-Label/Semibold ",
"icon": "comment",
"iconClasses": "material-symbols-outlined text-[20px] !h-fit !w-fit !ml-2 !mr-0",
"childClasses": "flex items-center rounded-lg self-start hover:bg-neutral-700 hover:text-white focus:outline-none focus:ring-2 transform translate-y-1 hover:translate-y-0 duration-500 ease-in-out drop-shadow-md border-[1px] rounded-md px-3 py-1",
"labelPosition": "right",
"IsTypeActon": true,
"workflow_action": "navigateToJournalsDetail",
"action_type": "workflow"
}
},
{
"type": "Control",
"label": "",
"options": {
"display_type": "Text",
"showLabel": true,
"classes": "text-Label/Semibold",
"icon": "share",
"iconClasses": "material-symbols-outlined text-[20px] !w-fit !h-fit",
"childClasses": "bg-#2d3133 rounded-lg self-start hover:bg-neutral-700 hover:text-white focus:outline-none focus:ring-2 transform translate-y-1 hover:translate-y-0 duration-500 ease-in-out drop-shadow-md border-[1px] rounded-md px-3 py-1 shareBtn",
"labelPosition": "left",
"labelClasses": "text-Footnote/Regular",
"IsTypeActon": true,
"action_type": "workflow",
"workflow_action": "shareJournal",
"data_calculation": {
"jsonDataTransformFn": "return '';"
}
}
}
]
}
]
},
{
"type": "ArrayLayout",
"scope": "#/properties/commentData",
"options": {
"size": 12,
"showSortButtons": true,
"classes": "flex flex-col border-l-2 border-dashed border-white overflow-y-scroll mb-[5em]",
"detail": {
"type": "GridLayout",
"options": {
"size": 12,
"classes": "",
"childClasses": "mb-3 pl-3"
},
"elements": [
{
"type": "FlexLayout",
"options": {
"classes": "flex-col gap-3",
"size": 12
},
"elements": [
{
"type": "FlexLayout",
"options": {
"size": 10,
"classes": " gap-5 items-center "
},
"elements": [
{
"type": "Control",
"scope": "#/properties/profile",
"options": {
"display_type": "Image",
"classes": "h-[45px] w-[45px]",
"styles": "border-radius:100%; object-fit: cover;"
}
},
{
"type": "FlexLayout",
"options": {
"classes": "justify-between items-center"
},
"elements": [
{
"type": "GridLayout",
"options": {
"size": 12,
"classes": "items-center "
},
"elements": [
{
"type": "Control",
"scope": "#/properties/profileName",
"options": {
"display_type": "Text",
"classes": "text-SectionSubtitle/Semibold",
"size": 12
}
},
{
"type": "FlexLayout",
"options": {
"size": 12,
"classes": "justify-start items-center"
},
"elements": [
{
"type": "Control",
"scope": "#/properties/industry",
"options": {
"display_type": "Text",
"classes": "text-Label/Semibold"
}
},
{
"type": "Control",
"options": {
"display_type": "Divider",
"orientation": "vertical",
"classes": "h-[13px]"
}
},
{
"type": "Control",
"options": {
"display_type": "Text",
"classes": "text-Label/Regular",
"data_calculation": {
"jsonDataTransformFn": "return params['experience'] ? `${params['experience']} years of experience` : '1 years of experience';"
}
}
}
]
}
]
}
]
}
]
},
{
"type": "Control",
"scope": "#/properties/comment",
"options": {
"display_type": "TextReadMoreField",
"classes": "ml-10 text-SectionSubtitle/Regular"
}
}
]
}
]
}
}
},
{
"type": "Card",
"options": {
"size": 12,
"classes": "border border-white rounded-lg gap-y-2 p-3 bg-neutral-800 ",
"childClasses": "fixed bottom-[62px] w-[90%]"
},
"elements": [
{
"type": "FlexLayout",
"options": {
"size": 12,
"classes": "items-center justify-between gap-2"
},
"elements": [
{
"type": "Control",
"scope": "#/properties/comment",
"label": "Type your comment here",
"options": {
"size": 10,
"display_type": "TextInput",
"showLabel": false
}
},
{
"type": "Control",
"label": "send",
"options": {
"display_type": "Button",
"btntype": "flat",
"styles": "background: linear-gradient(180deg, #8074FA 0%, #63D0EA 100%);",
"labelClasses": "text-white",
"IsTypeActon": true,
"workflow_action": "addCommnet",
"workflow_action_label": "Add a new commnet",
"action_type": "workflow"
}
}
]
}
]
}
]
}
]
}
- i am using “@jsonforms/angular”: “3.1.0”,
Hi @KarThikCh-dev,
It seems you are using a custom renderer set. Therefore the performance is largely determined on how this custom renderer set is implemented. If you find any bottlenecks in the base Angular bindings, or any of our off-the-shelf renderers in case you are still using them, then let us know.