On click of performance tab of an interface it says - not a valid component

Can you share the code of that interface?

{
a!columnsLayout(
columns: {
a!forEach(
items: ri!cardHeader,
expression: {
a!columnLayout(
contents: {
a!cardLayout(
contents: {
a!richTextDisplayField(
value: a!richTextItem(
text: fv!item,
color: "NEGATIVE",
style: "STRONG"
),
marginBelow: "NONE"
),
a!richTextDisplayField(
value: a!richTextItem(text: ri!cardInfo[fv!index]),
marginAbove: "NONE"
)
},
style: "STANDARD",
height: if(
a!isPageWidth("PHONE"),
"AUTO",
if(
or(
a!isPageWidth("TABLET_PORTRAIT"),
a!isPageWidth("TABLET_LANDSCAPE")
),
"MEDIUM_PLUS",
"MEDIUM"
)
)
),
a!richTextDisplayField(
value: {
a!richTextItem(
text: ri!cardDetails[fv!index],
style: "STRONG"
),
a!richTextBulletedList(
items: if(
fv!index = 1,
cons!DG_GLOBAL_PRINCIPLE_FRAMEWORK,
if(
fv!index = 2,
cons!DG_CGS_POLICIES,
if(
fv!index = 3,
cons!DG_CGS_PROCEDURES,
if(
fv!index = 4,
cons!DG_CGS_SPI,
cons!DG_GOVERNANCE_LIBRARY_TOPICS
)
)
)
)
),
a!richTextItem(
text: "(Note, policies are mostly held by Second Line of Defence (SLOD))",
showWhen: fv!index = 2
)
}
)
}
),
a!columnLayout(
contents: {
a!textField(readOnly: true),
a!richTextDisplayField(
value: a!richTextIcon(
icon: if(
a!isPageWidth("PHONE"),
"arrow-circle-down-alt",
"arrow-circle-right-alt"
),
size: "LARGE",
color: "NEGATIVE"
),
align: "CENTER"
)
},
width: "EXTRA_NARROW",
showWhen: not(length(ri!cardInfo) = fv!index)
)
}
)
},
spacing: "NONE"
),
a!columnsLayout(
columns: {
a!columnLayout(
contents: a!cardLayout(
contents: {
a!richTextDisplayField(
value: a!richTextItem(
text: "Training Materials, Handbooks and External Development Updates",
color: "NEGATIVE",
style: "STRONG"
),
marginBelow: "NONE"
),
a!richTextDisplayField(
value: a!richTextItem(
text: "The library also acts a repository for training materials, external development updates, SMCR information and other helpful reference documents"
),
marginAbove: "NONE"
)
},
style: "STANDARD"
)
)
}
)
}

I do not see that error. What values do you use for testing?

ri!cardHeader: {"Global Principles & Frameworks", "Policies", "Procedures"}

ri!cardInfo: {"Global Principles overlay all Group policies, procedures and operating instructions. They guide us in the decisions we take and how we operate", "also known as Functional Instruction Manuals (FIMs) define the minimum control requirements that we must adopt throughout HSBC."}

ri!cardDetails: {"The Global Principles incorporate the following frameworks:", "CG&S Policies/FIMs include:", "CG&S Procedures include:"}

ri!cardHeader: {"Global Principles & Frameworks", "Policies", "Procedures"}

ri!cardInfo: {"Global Principles overlay all Group policies, procedures and operating instructions. They guide us in the decisions we take and how we operate", "also known as Functional Instruction Manuals (FIMs) define the minimum control requirements that we must adopt throughout HSBC."}

ri!cardDetails: {"The Global Principles incorporate the following frameworks:", "CG&S Policies/FIMs include:", "CG&S Procedures include:"}

Works on my environment. What kind of environment do you use?

on prem env

Works for me as well. Though your cardInfo rule input only has 2 items vs the other inputs have 3.