Proposal for Asynchronous Loading of Item Tooltips on the Wiki

[Xitayasl]

Originally Posted by rahmani [You must be logged in to view images. Log in or Register.]

Hello Project 1999 Community,

I've been exploring ways to enhance the user experience on our wiki, particularly concerning the loading efficiency of pages with transcluded item templates, like {{:Ice Crystal Staff}}. The current setup requires the entire page content, including item templates, to be fully loaded before rendering, which can be time-consuming.

To address this, I've developed a method to asynchronously load item data. The core idea is to initially load a placeholder for each item, and then fetch the item details in the background after the page loads. This approach significantly accelerates the initial page load time.

Here's the implementation outline:

1. JavaScript Code: This script will replace each item placeholder with the actual item link and details fetched asynchronously.
   
   

   $(document).ready(function() {
       $('.item-data-placeholder').each(function() {
           var itemId = this.id.substring(10);  // Trims "item-data-" prefix
           var $this = $(this);
           $.get(mw.util.wikiScript('api'), {
               action: 'expandtemplates',
               text: '{{:' + itemId + '}}',
               prop: 'wikitext',
               format: 'json'
           }, function(data) {
               var wikitext = data.expandtemplates.wikitext;
               $.get(mw.util.wikiScript('api'), {
                   action: 'parse',
                   contentmodel: 'wikitext',
                   text: wikitext,
                   prop: 'text',
                   format: 'json'
               }, function(data) {
                   var itemData = data.parse.text['*'];
                   var itemLink = mw.util.getUrl(itemId);
                   $this.html('<a href="' + itemLink + '">' + itemData + '</a>');
               });
           });
       });
   });

2. Template: ItemLink: This is a simple placeholder template for each item.
   
   

   <span id="item-data-{{{1}}}" class="item-data-placeholder">[[{{{1}}}]]</span>

3. Usage Example in Wikitext: This demonstrates how to use the ItemLink template in a page.
   
   

   == [[Bard]] ==
   * '''Ears'''      - {{ItemLink|Black Sapphire Electrum Earring}}
   * '''Fingers'''   - {{ItemLink|Djarn's Amethyst Ring}}, {{ItemLink|Platinum Fire Wedding Ring}}
   [ ... and so on for other items ... ]

The implementation ensures that the page becomes visible and interactive much faster, while item details are fetched and displayed subsequently. This should create a smoother and more responsive user experience.

I hope this solution can be useful for our community. If anyone with admin access to the wiki is interested, I'd be glad to assist in implementing this feature.

Best regards,
Rahmani

You've done a great job that will definitely be beneficial to us. Thank you!