I'm currently developing a project using angularJS. My goal is to display a specific part of the data within the main json dataset, which contains around 5000 to 9000 lines, on the view using ng-repeat. There's a table data tag that shows checkboxes or radio buttons using CSS images. Here's the code snippet:
<tr ng-repeat="o in main[menu].options" >
<td style="width:10%;" class="radio"
ng-class="{checked: main[menu][active].active === o.instanceId}"
ng-click="main[menu][active].active = o.instanceId;"
ng-if="menu === 'requiredOptionGroups'">
</td>
<td>..some other data...</td>
</tr>
For checkboxes:
<tr ng-repeat="o in main[menu].options" >
<td style="width: 10%;" class="checkbox"
ng-class="{checked: o.preSelect == 'true'}"
ng-click="o.preSelect = o.preSelect=== 'false'?'true':'false';"
ng-if="menu === 'optionalOptionGroups'" ng-model="o.preSelect">
</td>
<td>..some other data...</td>
</tr>
The CSS classes for radio and checkbox are as follows:
.checkbox {
cursor: pointer;
background: url(./images/check_box_empty.png) no-repeat center center;
height: 22px;
width: 22px;
&.checked { background: url(./images/check_box_checked.png) no-repeat center center; }
}
.radio {
cursor: pointer;
background: url(./images/radio_button_empty.png) no-repeat center center;
height: 22px;
width: 22px;
&.checked { background: url(./images/radio_button_filled.png) no-repeat center center; }
}
The issue I'm encountering is a noticeable delay when users click the radio button or checkbox button before the checked image appears.
The code works well for smaller datasets.
Is there any workaround to overcome this delay? I've tried searching for ways to improve performance here, but we need to show all the data to the user.