Finalize loading speed improvements for all data tables (this now closes #120)

This is a workaround for now. The tables are still DOM sourced because of too big dependencies between server side rendering and frontend JS code. The tables are initially load while tbody is hidden, this results in a speedup by around 65 %.

public/viewjs/batteries.js

@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#batteries-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {

public/viewjs/batteriesjournal.js

@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#batteries-journal-table tbody').removeClass("d-none");
 
 $("#battery-filter").on("change", function()
 {

public/viewjs/batteriesoverview.js

@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#batteries-overview-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {

public/viewjs/chores.js

@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#chores-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {

public/viewjs/choresjournal.js

@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#chores-journal-table tbody').removeClass("d-none");
 
 $("#chore-filter").on("change", function()
 {

public/viewjs/choresoverview.js

@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#chores-overview-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {

public/viewjs/equipment.js

@@ -21,6 +21,7 @@
 		DisplayEquipment($('#equipment-table tbody tr:eq(0)').data("equipment-id"));
 	}
 });
+$('#equipment-table tbody').removeClass("d-none");
 
 equipmentTable.on('select', function(e, dt, type, indexes)
 {

public/viewjs/locations.js

@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#locations-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {

public/viewjs/manageapikeys.js

@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#apikeys-table tbody').removeClass("d-none");
 
 var createdApiKeyId = GetUriParam('CreatedApiKeyId');
 if (createdApiKeyId !== undefined)

public/viewjs/productgroups.js

@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#productgroups-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {

public/viewjs/products.js

@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#products-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {

public/viewjs/quantityunits.js

@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#quantityunits-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {

public/viewjs/recipeform.js

@@ -43,6 +43,7 @@ var recipesPosTables = $('#recipes-pos-table').DataTable({
 		dataSrc: 4
 	}
 });
+$('#recipes-pos-table tbody').removeClass("d-none");
 
 var recipesIncludesTables = $('#recipes-includes-table').DataTable({
 	'paginate': false,
@@ -64,6 +65,7 @@ var recipesIncludesTables = $('#recipes-includes-table').DataTable({
 		});
 	}
 });
+$('#recipes-includes-table tbody').removeClass("d-none");
 
 Grocy.FrontendHelpers.ValidateForm('recipe-form');
 $("#name").focus();

public/viewjs/recipes.js

@@ -23,6 +23,7 @@
 		this.api().row({ order: 'current' }, 0).select();
 	}
 });
+$('#recipes-table tbody').removeClass("d-none");
 
 var rowSelect = GetUriParam("row");
 if (typeof rowSelect !== "undefined")

public/viewjs/shoppinglist.js

@@ -23,6 +23,7 @@
 		dataSrc: 3
 	}
 });
+$('#shoppinglist-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {

public/viewjs/stockjournal.js

@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#stock-journal-table tbody').removeClass("d-none");
 
 $("#product-filter").on("change", function()
 {

public/viewjs/taskcategories.js

@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#taskcategories-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {

public/viewjs/tasks.js

@@ -22,6 +22,7 @@
 		dataSrc: 3
 	}
 });
+$('#tasks-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {

public/viewjs/users.js

@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#users-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {

views/batteries.blade.php

@@ -35,7 +35,7 @@
 					<th>{{ $L('Charge cycle interval (days)') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($batteries as $battery)
 				<tr>
 					<td class="fit-content">

views/batteriesjournal.blade.php

@@ -37,7 +37,7 @@
 					<th>{{ $L('Tracked time') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($chargeCycles as $chargeCycleEntry)
 				<tr class="@if($chargeCycleEntry->undone == 1) text-muted @endif">
 					<td class="fit-content">

views/batteriesoverview.blade.php

@@ -48,7 +48,7 @@
 					<th class="d-none">Hidden status</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($current as $curentBatteryEntry)
 				<tr id="battery-{{ $curentBatteryEntry->battery_id }}-row" class="@if(FindObjectInArrayByPropertyValue($batteries, 'id', $curentBatteryEntry->battery_id)->charge_interval_days > 0 && $curentBatteryEntry->next_estimated_charge_time < date('Y-m-d H:i:s')) table-danger @elseif(FindObjectInArrayByPropertyValue($batteries, 'id', $curentBatteryEntry->battery_id)->charge_interval_days > 0 && $curentBatteryEntry->next_estimated_charge_time < date('Y-m-d H:i:s', strtotime("+$nextXDays days"))) table-warning @endif">
 					<td class="fit-content">

views/chores.blade.php

@@ -35,7 +35,7 @@
 				<th>{{ $L('Description') }}</th>
 			</tr>
 		</thead>
-		<tbody>
+		<tbody class="d-none">
 			@foreach($chores as $chore)
 			<tr>
 				<td class="fit-content">

views/choresjournal.blade.php

@@ -38,7 +38,7 @@
 					<th>{{ $L('Done by') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($choresLog as $choreLogEntry)
 				<tr class="@if($choreLogEntry->undone == 1) text-muted @endif">
 					<td class="fit-content">

views/choresoverview.blade.php

@@ -48,7 +48,7 @@
 					<th class="d-none">Hidden status</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($currentChores as $curentChoreEntry)
 				<tr id="chore-{{ $curentChoreEntry->chore_id }}-row" class="@if(FindObjectInArrayByPropertyValue($chores, 'id', $curentChoreEntry->chore_id)->period_type === \Grocy\Services\ChoresService::CHORE_TYPE_DYNAMIC_REGULAR && $curentChoreEntry->next_estimated_execution_time < date('Y-m-d H:i:s')) table-danger @elseif(FindObjectInArrayByPropertyValue($chores, 'id', $curentChoreEntry->chore_id)->period_type === \Grocy\Services\ChoresService::CHORE_TYPE_DYNAMIC_REGULAR && $curentChoreEntry->next_estimated_execution_time < date('Y-m-d H:i:s', strtotime("+$nextXDays days"))) table-warning @endif">
 					<td class="fit-content">

views/equipment.blade.php

@@ -24,7 +24,7 @@
 					<th>{{ $L('Name') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($equipment as $equipmentItem)
 				<tr data-equipment-id="{{ $equipmentItem->id }}">
 					<td>

views/locations.blade.php

@@ -33,7 +33,7 @@
 					<th>{{ $L('Description') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($locations as $location)
 				<tr>
 					<td class="fit-content">

views/manageapikeys.blade.php

@@ -40,7 +40,7 @@
 					<th>{{ $L('Created') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($apiKeys as $apiKey)
 				<tr id="apiKeyRow_{{ $apiKey->id }}">
 					<td class="fit-content">

views/productgroups.blade.php

@@ -33,7 +33,7 @@
 					<th>{{ $L('Description') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($productGroups as $productGroup)
 				<tr>
 					<td class="fit-content">

views/products.blade.php

@@ -41,7 +41,7 @@
 					<th>{{ $L('Product group') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($products as $product)
 				<tr>
 					<td class="fit-content">

views/quantityunits.blade.php

@@ -33,7 +33,7 @@
 					<th>{{ $L('Description') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($quantityunits as $quantityunit)
 				<tr>
 					<td class="fit-content">

views/recipeform.blade.php

@@ -72,7 +72,7 @@
 							<th class="d-none">Hiden ingredient group</th>
 						</tr>
 					</thead>
-					<tbody>
+					<tbody class="d-none">
 						@if($mode == "edit")
 						@foreach($recipePositions as $recipePosition)
 						<tr class="@if(FindObjectInArrayByPropertyValue($recipesFulfillment, 'recipe_pos_id', $recipePosition->id)->need_fulfilled == 1) table-success @elseif(FindObjectInArrayByPropertyValue($recipesFulfillment, 'recipe_pos_id', $recipePosition->id)->need_fulfilled_with_shopping_list == 1) table-warning  @else table-danger @endif">
@@ -125,7 +125,7 @@
 							<th>{{ $L('Recipe') }}</th>
 						</tr>
 					</thead>
-					<tbody>
+					<tbody class="d-none">
 						@if($mode == "edit")
 						@foreach($recipeNestings as $recipeNesting)
 						<tr>

views/recipes.blade.php

@@ -26,7 +26,7 @@
 					<th class="d-none">Hidden status for sorting of "Requirements fulfilled" column</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($recipes as $recipe)
 				<tr data-recipe-id="{{ $recipe->id }}">
 					<td>

views/shoppinglist.blade.php

@@ -63,7 +63,7 @@
 					<th class="d-none">Hidden status</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($listItems as $listItem)
 				<tr id="shoppinglistitem-{{ $listItem->id }}-row" class="@if(FindObjectInArrayByPropertyValue($missingProducts, 'id', $listItem->product_id) !== null) table-info @endif">
 					<td class="fit-content">

views/stockjournal.blade.php

@@ -39,7 +39,7 @@
 					<th>{{ $L('Booking type') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($stockLog as $stockLogEntry)
 				<tr class="@if($stockLogEntry->undone == 1) text-muted @endif">
 					<td class="fit-content">

views/taskcategories.blade.php

@@ -33,7 +33,7 @@
 					<th>{{ $L('Description') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($taskCategories as $taskCategory)
 				<tr>
 					<td class="fit-content">

views/tasks.blade.php

@@ -64,7 +64,7 @@
 					<th class="d-none">Hidden status</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($tasks as $task)
 				<tr id="task-{{ $task->id }}-row" class="@if($task->done == 1) text-muted @endif @if(!empty($task->due_date) && $task->due_date < date('Y-m-d')) table-danger @elseif(!empty($task->due_date) && $task->due_date < date('Y-m-d', strtotime("+$nextXDays days"))) table-warning @endif">
 					<td class="fit-content">

views/users.blade.php

@@ -34,7 +34,7 @@
 					<th>{{ $L('Last name') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($users as $user)
 				<tr>
 					<td class="fit-content">