Very, very slow reaction when clicking button

Wappler General
1

Hi guys, I have a form that is quite long. Generally everything works well and fairly quickly apart from this one area. I think the video should demonstrate the issue. And I apologise now for wasting 3 minutes of your time.

Sorry about the babbling in the video, I didn’t prepare a script. And I was distracted part way through, but it still shows the delay.

Screen.mp4 (17.4 MB)

This is the code for the Yes/No button and for the Medium Editor textarea. The code works, BUT it is very slow.

      <div class="form-group row" id="impact_temp" is="dmx-radio-group">
        <legend class="col-form-label col-2" dmx-text="'Temporary repairs'"></legend>
        <div class="col-sm-3">
          <div class="btn-group btn-group-toggle d-flex flex-wrap" is="dmx-repeat" data-toggle="buttons" dmx-bind:repeat="sc_menus.data.q_menus.where(`menu_id`, 21, '==')">
            <label class="btn btn-sm btn-outline-secondary" dmx-bind:for="input_{{menu_id}}_{{menu_list_id}}" dmx-class:active="menu_list_id == business_principal_sc.data.b_principal_q[0].impact_temp">
              <input class="custom-control-input" type="radio" dmx-bind:id="input_{{menu_id}}_{{menu_list_id}}" dmx-bind:value="menu_list_id" name="impact_temp" dmx-bind:checked="menu_list_id == business_principal_sc.data.b_principal_q[0].impact_temp" dmx-on:changed="">{{list_label}}
            </label>
          </div>
        </div>
      </div>
                    
      <div class="form-group row" id="impact_temp_comm">
        <label for="inp_impact_temp_comm" class="col-form-label col-2">Temporary comments</label>
        <div class="input-group col-sm-9">
          <div class="input-group-prepend">
            <div class="input-group-text"><i class="fas fa-align-left fa-fw fa-lg"></i></div>
          </div>
          <textarea id="inp_impact_temp_comm" class="form-control" is="dmx-medium-editor" name="impact_temp_comm" aria-describedby="inp_impact_temp_comm_help">{{(sc_menus.data.q_menus.where('menu_list_id', inp_driv_rep_status.value, '==')[0].list_ref == 291) && (impact_temp.value == 126) ? sc_ad_principals_q.data.sa_ad_commpara_q.where('commpara_id', 14, '==')[0].commpara_text : "test_data"}}</textarea>
        </div>
      </div>

Why is there such a delay?
Should I be putting the ternary data binding code in the Yes/No button and triggering it from a ‘Value Changed’ or ‘Blur’ type of action? Will this speed things up?

2

@UKRiggers, out of curiosity, when you look at the developer tools > network what does the load time for the form look like and does it change as you navigate through the form or is it consistent?

On thing I have done on some of my longer forms is make it so that the queries only load upon the click of the next page. That seems to speed things up for me versus having everything load at once.

I am not sure if you have broken up your form that way or not, so I am just guessing, but the load time in the developer tools should give you an indication if it is a server load versus something in the app structure.

And FYI you did not babble. If I ever make a video, you will hear true babbling, LOL.

1 Like
3

To me, visually, it loads quickly. I’m not very good at interpreting the Network tab with respect to speeds, I use that tab to check on the integrity of the data from the queries. Here is a screenshot that might tell you something. When I click the Yes/No button mentioned above, nothing more is recorded in this Network tab.

image
image.png1924×1021 79.9 KB

4

When you run:

{{(sc_menus.data.q_menus.where('menu_list_id', inp_driv_rep_status.value, '==')[0].list_ref == 291) && (impact_temp.value == 126) ? sc_ad_principals_q.data.sa_ad_commpara_q.where('commpara_id', 14, '==')[0].commpara_text : "test_data"}}

in a mysql program such as mysql workbench or phpadmin or something, how long does it take to execute the result?

I am not sure the delay has anything to do with the medium text editor, but to be sure, it would be good idea to run the query through mysql (or whichever database you are using) directly to see if it has a similar delay or not.

I have not seen a 40+ second delay in a server response before so I am just suggesting things to pin point where the issue may be coming from.

5

@UKRiggers
The question is, when you open the dev tools > Net tab > XHR and you click your button, do you see anything that loads there - like a server action?
Or does your page freeze and the delay is clientside?

6

When I click the Yes button, and you wait 30 seconds or so, then the text appears. Nothing appears or changes in the Network tab at all, so nothing in the XHR tab.

7

Scott, on pressing the Yes button, it’s a very simple query to get the required result and only took 0.0004 seconds.

8

Teodor, the idea with these buttons etc on the form is that if say

  • drop-down menu A value is 51,
  • button D value is 291 and
  • button F value is 61
    then add paragraph 14 from a DB table to the medium editor.

There would then be about 15 of these combinations or conditions that would then build up a large chunk of text within the medium editor. Some would match and some wouldn’t, so you may end up with 6 paragraphs that make-up this body of text.

9

So there is no wait/slowdown on the server side, right?
Does the page freeze (so you can’t select anything else while waiting)?
Doest the same happen if you directly bind the expression on the page, instead of using medium editor?

10

Hi Teodor, I have now uploaded it to the online server. When I run the page there, it still takes ages but this time I am getting lots of messages so will take a look at those.

11

Hi @Teodor, I have been playing (as suggested) as best I can and found some interesting results, and to answer your questions

  • No, there does not seem to be any slowdown on the server.
  • The page does not freeze, I can select and change other items on the page.
  • Yes, the same thing happens when binding directly to the page.

I have simplified the expression to impact_temp.value == 126 ? 'yes' : 'No'
impact_temp being the Yes/No button group.

When the page is first refreshed (Ctrl-Shift-R) this is what you see on the 4th section
image

Because neither Yes or No is selected then the ID does not equal 126 and therefore is shows ‘No’ correctly in 3 places.

When you click Yes, after approx. 40 seconds you get this

image

So only two of the calculations have worked. The one in the textarea didn’t.

If I then click No, it will take many seconds to change back BUT if I delete the ‘yes’ in the input field, it will change immediately.

If I click one of the buttons I can get it to change immediately if I select something using the drop-down menu above. All very strange.

I have uploaded this test scenario to the link that I gave you last night.

Here is a not-so-quick video showing what I have tried to explain above.

Screen.mp4 (16.0 MB)

12

And here is the code for those few form elements

      <div class="form-group row" id="impact_road" is="dmx-radio-group">
        <legend class="col-form-label col-2" dmx-text="'Roadworthy'"></legend>
        <div class="col-sm-3">
          <div class="btn-group btn-group-toggle d-flex flex-wrap" is="dmx-repeat" data-toggle="buttons" dmx-bind:repeat="sc_menus.data.q_menus.where(`menu_id`, 20, '==')">
            <label class="btn btn-sm btn-outline-secondary" dmx-bind:for="input_{{menu_id}}_{{menu_list_id}}" dmx-class:active="menu_list_id == business_principal_sc.data.b_principal_q[0].impact_road">
              <input class="custom-control-input" type="radio" dmx-bind:id="input_{{menu_id}}_{{menu_list_id}}" dmx-bind:value="menu_list_id" dmx-bind:name="impact_road" dmx-bind:checked="menu_list_id == business_principal_sc.data.b_principal_q[0].impact_road">{{list_label}}
            </label>
          </div>
        </div>
      </div>
      
      
      <div class="form-group row" id="impact_temp" is="dmx-radio-group">
        <legend class="col-form-label col-2" dmx-text="'Temporary repairs'"></legend>
        <div class="col-sm-3">
          <div class="btn-group btn-group-toggle d-flex flex-wrap" is="dmx-repeat" data-toggle="buttons" dmx-bind:repeat="sc_menus.data.q_menus.where(`menu_id`, 21, '==')">
            <label class="btn btn-sm btn-outline-secondary" dmx-bind:for="input_{{menu_id}}_{{menu_list_id}}" dmx-class:active="menu_list_id == business_principal_sc.data.b_principal_q[0].impact_temp">
              <input class="custom-control-input" type="radio" dmx-bind:id="input_{{menu_id}}_{{menu_list_id}}" dmx-bind:value="menu_list_id" name="impact_temp" dmx-bind:checked="menu_list_id == business_principal_sc.data.b_principal_q[0].impact_temp" dmx-on:changed="">{{list_label}}
            </label>
          </div>
        </div>
      </div>
      
      
      <div class="form-group row">
        <label for="xx" class="col-form-label col-2"></label>
          <p>Testing binding on page : {{impact_temp.value == 126 ? 'yes' : 'No'}}</p>
      </div>
      <div class="form-group row">
        <label for="xx" class="col-form-label col-2">INPUT FIELD</label>
        <div class="input-group col-sm-10">
          <input id="text1" name="text1" type="text" class="form-control" dmx-bind:value="impact_temp.value == 126 ? 'yes' : 'No'">
        </div>
      </div>
      <div class="form-group row" id="impact_temp_comm">
        <label for="inp_impact_temp_comm" class="col-form-label col-2">TEXTAREA</label>
        <div class="input-group col-sm-10">
          <div class="input-group-prepend">
            <div class="input-group-text"><i class="fas fa-align-left fa-fw fa-lg"></i></div>
          </div>
          <textarea id="inp_impact_temp_comm" class="form-control" name="impact_temp_comm" aria-describedby="inp_impact_temp_comm_help">{{impact_temp.value == 126 ? 'yes' : 'No'}}</textarea>
        </div>
      </div>
    </div>
  </div>