How Gueleton Works

The idea of Gueleton came from my frustration when dealing with skeleton screen sizing, positioning, and spacing, and it’s currently released as an experimental plugin.

Its core advantage lies in high automation: simply pass in data to automatically generate skeleton placeholders without any additional configuration. Relying on the pre-stored data mechanism, Gueleton can render skeleton screens for content that requires remote data to render.

Of course, Gueleton also has some limitations:

• Difficult to generate completely accurate skeletons, especially for complex components.
• Some degree of code invasiveness to your project. You need to wrap every content that needs skeleton generation with the Gueleton component.

If you’re interested, please continue reading to understand its implementation principle.

Implementation Principle

1. First, you need to preset data-key and data to identify and store the data source.

   <template>
     <Gueleton
       data-key="tweet-cards"
       :data="cards"
       :loading="loading"
       v-slot="{ data: cards }"
     >
       <TwitterCard v-for="card in cards" />
     </Gueleton>
   </template>

2. Gueleton receives data-key and data through middleware route interfaces (/__gueleton/**) registered with the development server, and saves them in a local file (.gueleton/index.json).

   • Directory.gueleton

     • index.json
   • Directorysrc/

     • …
   • …
   • package.json
   • README.md

   index.json

   {
     "tweet-cards": "...",
     "[data-key]": "..."
   }

3. Core Process

   • In development mode:

     1. When loading the page for the first time, Gueleton stores the data-key and cropped data into .gueleton/index.json through the /__gueleton/** interface.

        The cropped data will be referred to as pre-stored data below.

     2. In subsequent page loads, Gueleton uses data-key as a query parameter to read the corresponding pre-stored data from .gueleton/index.json through the /__gueleton/** interface, and uses it to render the default slot content, then generates skeleton screens based on DOM elements.

        <template>
          <Gueleton
            data-key="tweet-cards"
            :data="cards"
            :loading="loading"
            v-slot="{ data: cards }"
          >
            <TwitterCard v-for="card in cards" />
          </Gueleton>
        </template>

   • In production build:

     1. During build time, Gueleton inlines all pre-stored data from .gueleton/index.json into the build output.
     2. In production environment, Gueleton uses the inlined pre-stored data to render default slot content, then generates skeleton screens based on DOM elements.