Slow navigation

Wappler General Need Help
1

I have this code, but it reacts very slow

<a href="#" class="dropdown-toggle nav-link " data-toggle="dropdown"> <i class="material-icons ">search </i> Suchen </a>
						<div class="dropdown-menu dropdown-with-icons ">
							<div class="container ">
								<div class="row menueweite" style="background-color:lavender;" dmx-show="!suchfeldGarn.value">
									<div class="col-sm-8">
										<input class="form-control" id="suchfeldMaterial" placeholder="Filter by Material" name="suchfeldMaterial" is="dmx-autocomplete" dmx-bind:data="serverconnect1.data.suchtxt_bestandteil" optiontext="Bestanteil1"
											optionvalue="FarbtabelleID" matchaccent>
									</div>
									<div class="col-sm-2">
										<button class=" btn-fab btn-fab-mini btn-round " dmx-on:click="suchfeldMaterial.setValue()" dmx-hide="!suchfeldMaterial.value">
											<i class="material-icons">highlight_off</i>
										</button>
									</div>
								</div>
								<br>
								<div>
									<div class="row menueweite" style="background-color:lavender;" dmx-show="!suchfeldMaterial.value">
										<div class="col-sm-8">
											<input style="background-color:lavender;" type="text" class="form-control " id="suchfeldGarn" name="suchfeldGarn" placeholder="Filter by Garn" is="dmx-autocomplete"
												dmx-bind:data="serverconnect1.data.suchtxt" optiontext="Garn" optionvalue="FarbtafelNr" matchaccent>
										</div>

										<div class="col-sm-2">
											<button class=" btn-fab btn-fab-mini btn-round " dmx-on:click="suchfeldGarn.setValue()" dmx-hide="!suchfeldGarn.value">
												<i class="material-icons">highlight_off</i>
											</button>
										</div>

									</div>
								</div>

							</div>
						</div>

					</li>

you can find it: www.ant-s.eu
goto “Sortiment”
push “Suchen”
“Filter By Material”
Write “Alpaca” then push Reset (X)

2

Without a filter, you’re loading about 600 images on this page - that’s why it’s slow. It would be best to use a paged query. Lazy-loading the images would also be an option - possibly in addition to paging.

3

but loading the pictures is not the problem.
The navigation of the search field is slow. it takes a lot of time to react. if I push the reset button it takes a lot of time to reset the field and sho the both input fields .

4

@ulrichantz
You have wrongly set up your server action(s) and database queries.
You have just ONE server action, which loads 10 database queries, 4 of which return 600+ items each:

Screenshot_15

On each filter value change, these 10 queries are called again, server is contacted again and they are being re-run and then all the data needs to be re-rendered on the page.

That is totally wrong server action set up.
You need to separate your queries in separate server actions, so only the one that’s filtered gets reloaded.

Also, you definitely need to use lazy load, as your images take like 25seconds to load initiatlly on a 100Mbit connection!

1 Like