Reworks the uplink interface to drastically reduce loading lag. (#19841)

code/modules/uplink/uplink.dm

@@ -13,7 +13,7 @@ var/global/list/uplinks = list()
 	var/active = FALSE
 	var/lockable = TRUE
 	var/telecrystals = 20
-
+	var/selected_cat = null
 	var/owner = null
 	var/datum/game_mode/gamemode = null
 	var/spent_telecrystals = 0
@@ -68,22 +68,24 @@ var/global/list/uplinks = list()
 	data["lockable"] = lockable
 
 	var/list/uplink_items = get_uplink_items(gamemode)
+
 	data["categories"] = list()
 	for(var/category in uplink_items)
 		var/list/cat = list(
 			"name" = category,
-			"items" = list(),
-		)
-		for(var/item in uplink_items[category])
-			var/datum/uplink_item/I = uplink_items[category][item]
-			cat["items"] += list(list(
-				"name" = I.name,
-				"cost" = I.cost,
-				"desc" = I.desc,
-			))
+			"items" = (category == selected_cat ? list() : null))
+		if(category == selected_cat)
+			for(var/item in uplink_items[category])
+				var/datum/uplink_item/I = uplink_items[category][item]
+				cat["items"] += list(list(
+					"name" = I.name,
+					"cost" = I.cost,
+					"desc" = I.desc,
+				))
 		data["categories"] += list(cat)
 	return data
 
+
 /obj/item/device/uplink/ui_act(action, params)
 	if(!active)
 		return
@@ -104,6 +106,9 @@ var/global/list/uplinks = list()
 		if("lock")
 			active = FALSE
 			SStgui.close_uis(src)
+		if("select")
+			selected_cat = params["category"]
+	return 1
 
 
 /obj/item/device/uplink/ui_host()

tgui/src/interfaces/uplink.ract

@@ -1,8 +1,6 @@
 <script>
-  import { filterMulti } from 'util/filter'
   component.exports = {
     data: {
-      filter: ''
     },
     oninit () {
       this.on({
@@ -15,19 +13,12 @@
           this.set('hovered')
         }
       })
-      this.observe('filter', (newkey, oldkey, keypath) => {
-        const categories = this.findAll('.display:not(:first-child)')
-        filterMulti(categories, this.get('filter').toLowerCase())
-      }, { init: false })
     }
   }
 </script>
 
 <ui-display title='Uplink' button>
   {{#partial button}}
-    {{#if config.fancy}}
-      <ui-input value='{{filter}}' placeholder='Filter...'/>
-    {{/if}}
     {{#if data.lockable}}
       <ui-button icon='lock' action='lock'>Lock</ui-button>
     {{/if}}
@@ -37,14 +28,16 @@
   </ui-section>
 </ui-display>
 {{#each data.categories}}
-  <ui-display title='{{name}}'>
-    {{#each items}}
-      <ui-section label='{{name}}' candystripe right>
-        <ui-button tooltip='{{name}}: {{desc}}' tooltip-side='left'
-          state='{{data.telecrystals < cost || (data.telecrystals - hovered.cost < cost && hovered.item != name) ? "disabled" : null}}'
-          action='buy' params='{"category": "{{category}}", "item": {{name}}, "cost": {{cost}}}'
-          on-hover='hover' on-unhover='unhover'>{{cost}} TC</ui-button>
-      </ui-section>
-    {{/each}}
+  <ui-display>
+	<ui-button action='select' params='{"category": "{{name}}"}'>{{name}}</ui-button>
+	{{#each items}}
+	  <ui-section label='{{name}}' candystripe right>
+		<ui-button tooltip='{{name}}: {{desc}}' tooltip-side='left'
+		  state='{{data.telecrystals < cost || (data.telecrystals - hovered.cost < cost && hovered.item != name) ? "disabled" : null}}'
+		  action='buy' params='{"category": "{{category}}", "item": {{name}}, "cost": {{cost}}}'
+		  on-hover='hover' on-unhover='unhover'>{{cost}} TC</ui-button>
+	  </ui-section>
+	{{/each}}
   </ui-display>
 {{/each}}
+