skeleton-loader 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: c1f3870a383b99e72e3c7536797fba096526f8b9d72659f09f718c4a7790c16f
+  data.tar.gz: 19e17acfcf43058cba8ce8acc1040be050e078e14a73ee8bf2d30c0b6bb67ed3
+SHA512:
+  metadata.gz: d0c4b8979f8984131fb39a49fb95e459b090911cf96f78fd72dfa9e64cd9eaf6d8993900be5eccbb0a341200a586bb6e83c6f319b7f68eaf47ce7f8614c48f03
+  data.tar.gz: c8bbf8deb35d75bed0d5ed768a0ca5e8f36a411e85667c1cf594ba1edc93f386ec39f52ad52d9876374c09c2fab00f13f4bf1b73ffa08114b63ae039fbb75473

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 Emad Rahimi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,401 @@
+# Skeleton Loader
+
+![Gem Version](https://img.shields.io/badge/gem-v0.1.0-brightgreen)
+[![CircleCI](https://dl.circleci.com/status-badge/img/circleci/8MamMcAVAVNWTcUqkjQk7R/Sh2DQkMWqqCv4MFvAmYWDL/tree/main.svg?style=svg&circle-token=CCIPRJ_PF8xu3Svcj2Ro4D8jhjCi7_71b7c0a7c781e09fc7194cd58cca67aecdc111b5)](https://dl.circleci.com/status-badge/redirect/circleci/8MamMcAVAVNWTcUqkjQk7R/Sh2DQkMWqqCv4MFvAmYWDL/tree/main)
+![Test Coverage: 100%](https://img.shields.io/badge/Test%20Coverage-100%25-brightgreen)
+[![MIT License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT)
+
+**Skeleton Loader** is a Ruby on Rails gem for creating animated placeholders that enhance loading states. Whether rendered through Rails views or dynamically with JavaScript, these skeletons provide a seamless visual experience while content loads.
+
+**⚠ Note:** Skeleton Loader is an experimental gem currently in early development, exploring the possibilities in the magical world of Rails gems. While loaders are ideally handled client-side, this gem aims to make it easy to add placeholders directly within the Rails realm.
+
+---
+
+## Table of Contents
+
+- [Features](#features)
+- [Installation](#installation)
+- [Setup](#setup)
+- [Rails Integration](#rails-integration)
+- [JavaScript Integration](#javascript-integration)
+- [Configuration](#configuration)
+- [Code Quality](#code-quality)
+- [Roadmap](#roadmap)
+- [Contributing](#contributing)
+- [License](#license)
+
+---
+
+![1](https://github.com/user-attachments/assets/f6f91f55-1bfa-42eb-9e8c-41606eb8afd5)
+
+## Features
+
+- 🚀 **Seamless Rails integration:** Enhances loading transitions with minimal setup.
+- 🔨 **Universal skeletons:** Creates loading states in Rails views & JavaScript.
+- ⚙️ **Consistency:** Unified templates & options across both environments.
+- ⚡ **Lightweight & fast:** Designed to be fast and easy to implement with minimal dependencies.
+
+---
+
+## Installation
+
+Add this line to your application’s Gemfile:
+
+```ruby
+gem "skeleton-loader"
+```
+
+Then, run:
+
+```bash
+bundle install
+```
+
+#### Requirements
+
+- **Ruby** 2.5 or higher
+- **Rails** 5.0 or higher
+- **Asset Pipeline** (Required for CSS handling)
+
+---
+
+## Setup
+
+### CSS Assets
+
+The gem's CSS is always managed via the Asset Pipeline:
+```javascript
+/* app/assets/stylesheets/application.css */
+*= require skeleton_loader
+```
+
+### JavaScript Assets
+
+Include the JavaScript functionality using Asset Pipeline, Webpack, or Importmap, depending on your setup:
+
+
+#### **Option 1: Asset Pipeline (Default for Rails 5)**
+
+In `app/assets/javascripts/application.js`, add:
+
+```javascript
+//= require skeleton_loader
+```
+
+#### **Option 2: Webpack (Default for Rails 6)**
+
+1. Install the package using Yarn:
+
+```bash
+yarn add "@ersync/skeleton-loader"
+```
+
+```javascript
+import SkeletonLoader from "skeleton-loader"
+```
+
+#### **Option 3: Importmap (Default for Rails 7)**
+
+1. Pin the package in `config/importmap.rb`:
+
+```ruby
+pin "skeleton-loader", to: "skeleton_loader.js"
+```
+
+```javascript
+import SkeletonLoader from "skeleton-loader"
+```
+
+### Install Templates
+
+To install predefined templates, run:
+
+```bash
+rails generate skeleton_loader:add_templates
+```  
+
+This adds templates to `app/views/skeleton_loader/`. Customize them as needed.
+
+To restore defaults later:
+
+```bash
+rails generate skeleton_loader:reset_templates
+```  
+
+---
+
+## Rails Integration
+
+The gem provides a primary view helper, `skeleton_loader`, which generates a skeleton that is automatically replaced with content once loading completes. You can use it with predefined templates or define your own HTML blocks.
+
+```ruby
+skeleton_loader(
+        content_id:,         # Required. Target element ID for replacement
+        **options,           # Optional. Customize the template
+        &block               # Optional. Define custom skeleton HTML (excludes type/options)
+)
+```
+
+### 1. Pre-defined Templates
+
+Specify `content_id` and, optionally, a template `type` and customization `options`.
+
+```erb
+<%= skeleton_loader(content_id: 'content-element', 
+  type: "card",
+  count: 5,
+  scale: 1.2,
+  animation_type: 'animation-pulse') %>
+```
+
+### 2. Custom Skeletons with a Block
+
+Define your own HTML structure in a block. Note that `type` and `options` are not used.
+
+```erb
+<%= skeleton_loader(content_id: 'content-element') do %>
+  <div class="custom-skeleton">
+    <div class="avatar skeleton-circle"></div>
+    <div class="text-lines"></div>
+  </div>
+<% end %>
+```
+
+See [Configuration](#configuration) for all available options.
+
+---
+
+## JavaScript Integration
+
+Skeleton Loader also provides a JavaScript API to dynamically create skeletons independently of Rails views.
+
+<details>
+<summary>💡 You only need this API if you're loading content asynchronously i.e. AJAX calls. For standard Rails views, use the Rails helper method instead.</summary>
+
+### 1. Basic Setup
+
+First, initialize the SkeletonLoader in your JavaScript:
+
+```javascript
+const skeleton = new SkeletonLoader();
+```
+
+### 2. Creating Skeletons
+
+There are two methods for creating skeletons using JavaScript:
+
+#### Using Pre-defined Templates
+
+```javascript
+const loader = skeleton.render({
+  contentId,                    // Required. ID of the element to replace with skeleton
+  ...options                    // Optional. See configuration section for available options
+});
+```
+
+#### Creating Custom Skeletons
+
+```javascript
+const loader = skeleton.renderCustom({
+  contentId,                    // Required. ID of the element to replace with skeleton
+  markup                        // Required. Custom HTML string for skeleton content
+});
+```
+
+### 3. Managing Loading States
+
+Each skeleton instance (both `render()` and `renderCustom()`) returns an object with these methods:
+
+- `isLoading()`: Returns the current loading state
+- `reveal()`: Removes skeleton and displays content
+
+```javascript
+// Check if still loading
+if (loader.isLoading()) {
+  // Do something while content loads
+}
+
+// Remove skeleton and show content
+loader.reveal();
+```
+
+<details>
+<summary><strong>Practical Examples</strong></summary>
+
+Here's some example showing how to use the skeleton loader with an API call:
+
+```javascript
+async function loadUserProfile(userId) {
+  // Create skeleton while loading
+  const loader = skeleton.render({
+    contentId: 'content-element',
+    type: 'profile'
+  });
+
+  try {
+    // Fetch your data
+    const response = await fetch(`/api/users/${userId}`);
+    const userData = await response.json();
+
+    // Update the DOM with your content
+    document.getElementById('content-element').innerHTML = createUserProfile(userData);
+
+    // Remove the skeleton
+    loader.reveal();
+  } catch (error) {
+    console.error('Failed to load user profile:', error);
+    loader.reveal(); // Always cleanup the skeleton
+  }
+}
+```
+
+```javascript
+async function loadDashboard() {
+  // Create multiple skeletons
+  const loaders = {
+    profile: skeleton.render({ contentId: 'profile', type: 'profile', scale:1.2, width:250 }),
+    stats: skeleton.render({ contentId: 'stats', type: 'card', scale:1.3, animationType:"sl-flow" }),
+    activities: skeleton.render({ contentId: 'activities', type: 'list' })
+  };
+
+  // Load your data
+  const [profileData, statsData, activitiesData] = await Promise.all([
+    fetchProfile(),
+    fetchStats(),
+    fetchActivities()
+  ]);
+
+  // Update content and reveal each section
+  updateProfile(profileData);
+  loaders.profile.reveal();
+
+  updateStats(statsData);
+  loaders.stats.reveal();
+
+  updateActivities(activitiesData);
+  loaders.activities.reveal();
+}
+```
+</details>
+</details>
+
+---
+
+## Configuration
+
+### Options
+
+The following options can be passed to both the Rails view helper and JavaScript API. Note that Rails uses snake_case (e.g., `animation_type`), while JavaScript uses camelCase (e.g., `animationType`).
+
+
+| Option | Type | Description | Default | Example |
+|--------|------|-------------|---------|---------|
+| `content_id` | String | Unique identifier for the skeleton loader container | `nil` | `"content-element"` |
+| `type` | String | Predefined template type (e.g., "product", "profile") | `"default"` | `"product"` |
+| `width` | Integer | Base width of a single skeleton item in pixels | Depends on `type` | `250` |
+| `count` | Integer | Number of skeleton items to render | Depends on `type` | `6` |
+| `per_row` | Integer | Number of skeleton items displayed per row | Depends on `type` | `4` |
+| `scale` | Float | Size multiplier for all skeleton item dimensions | `1.0` | `1.2` |
+| `animation_type` | String | Type of loading animation | `"sl-gradient"` | `"sl-glow"` |
+
+**Notes:**
+- `type` determines default layout and styling
+- `scale` affects width and spacing proportionally
+- `animation_type` supports different loading effect styles
+
+### Available Templates
+
+Skeleton Loader comes with several pre-built templates, each with their **default** configurations:
+
+| Template Type | Default Width | Count | Items Per Row |
+|--------------|---------------|-------|---------------|
+| `card`       | 200px         | 3     | 3            |
+| `comment`    | 900px         | 2     | 1            |
+| `default`    | 900px         | 1     | 1            |
+| `gallery`    | 320px         | 3     | 3            |
+| `paragraph`  | 900px         | 1     | 1            |
+| `product`    | 320px         | 3     | 3            |
+| `profile`    | 320px         | 3     | 3            |
+
+For an interactive preview of available templates and animations, visit the [Live Demo](https://ersync.github.io/skeleton-loader/).
+
+### Available Animations
+
+Choose from several animation styles to match your design:
+- `sl-gradient` (default): Smooth gradient movement
+- `sl-shine`: Shimmer effect
+- `sl-pulse`: Fade in/out
+- `sl-flow`: Continuous flow
+- `sl-neon`: Subtle glow
+- `sl-breathing`: Gentle scaling
+
+### Application Defaults
+
+To set application-wide defaults, create `config/initializers/skeleton_loader.rb`:
+
+```ruby
+SkeletonLoader.configure do |config|
+  # Override default template settings
+  config.templates[:product] = {
+          width: 400,
+          count: 6,
+          per_row: 3
+  }
+  # Global settings
+  config.scale = 1.0                     # Default: 1.0
+  config.animation_type = "sl-gradient"  # Default: "sl-gradient"
+end
+```
+
+### Advanced Configuration
+
+For applications requiring custom HTML elements or styles:
+
+```ruby
+SkeletonLoader.configure do |config|
+  config.additional_allowed_tags = []                  # Default: []
+  config.additional_allowed_attributes = {}            # Default: {}
+  config.additional_allowed_css_properties = []        # Default: []
+end
+```
+
+---
+
+## Code Quality
+
+Skeleton Loader maintains code quality through:
+
+- **RSpec**: Comprehensive tests covering core functionality.
+- **CircleCI**: Continuous integration ensures all new changes meet quality standards.
+- **Rubocop**: Consistent linting aligns code with Ruby community conventions.
+
+---
+
+## Roadmap
+
+Here are some features I'd like to add when I have time:
+
+- **New Templates & Animations**: Expanding template and animation options.
+- **Turbo & Stimulus Support**: Enhancing compatibility with Rails Turbo and StimulusJS.
+- **Builder Helper for Custom Skeletons:**: Introducing a helper to easily create custom skeletons (e.g., circles, rectangles, etc.) with customizable options, simplifying the process of designing custom skeletons.
+
+Suggestions and contributions are welcome!
+
+---
+
+## Contributing
+
+To contribute:
+
+1. Fork the repository.
+2. Create a new feature branch.
+3. Add tests for new features.
+4. Commit your changes and submit a pull request.
+
+Please follow the [Code of Conduct](https://github.com/ersync/skeleton-loader/blob/main/CODE_OF_CONDUCT.md) for all contributions.
+
+---
+
+## License
+
+Skeleton Loader is licensed under the MIT License. See [LICENSE](https://github.com/ersync/skeleton-loader/blob/main/LICENSE) for details.

data/app/assets/javascripts/skeleton_loader.js

@@ -0,0 +1,2 @@
+/*! For license information please see skeleton_loader.js.LICENSE.txt */
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.SkeletonLoader=e():t.SkeletonLoader=e()}(this,(()=>(()=>{"use strict";var t={d:(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{default:()=>E});var r=["contentId","type"],n=["contentId","mode","markup","type"],o=["contentId","mode","markup","type"];function i(t){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i(t)}function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=Array(e);r<e;r++)n[r]=t[r];return n}function c(){c=function(){return e};var t,e={},r=Object.prototype,n=r.hasOwnProperty,o=Object.defineProperty||function(t,e,r){t[e]=r.value},a="function"==typeof Symbol?Symbol:{},u=a.iterator||"@@iterator",l=a.asyncIterator||"@@asyncIterator",s=a.toStringTag||"@@toStringTag";function f(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{f({},"")}catch(t){f=function(t,e,r){return t[e]=r}}function h(t,e,r,n){var i=e&&e.prototype instanceof b?e:b,a=Object.create(i.prototype),c=new I(n||[]);return o(a,"_invoke",{value:T(t,r,c)}),a}function p(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}e.wrap=h;var y="suspendedStart",d="suspendedYield",v="executing",m="completed",g={};function b(){}function w(){}function S(){}var k={};f(k,u,(function(){return this}));var E=Object.getPrototypeOf,L=E&&E(E(A([])));L&&L!==r&&n.call(L,u)&&(k=L);var O=S.prototype=b.prototype=Object.create(k);function x(t){["next","throw","return"].forEach((function(e){f(t,e,(function(t){return this._invoke(e,t)}))}))}function j(t,e){function r(o,a,c,u){var l=p(t[o],t,a);if("throw"!==l.type){var s=l.arg,f=s.value;return f&&"object"==i(f)&&n.call(f,"__await")?e.resolve(f.__await).then((function(t){r("next",t,c,u)}),(function(t){r("throw",t,c,u)})):e.resolve(f).then((function(t){s.value=t,c(s)}),(function(t){return r("throw",t,c,u)}))}u(l.arg)}var a;o(this,"_invoke",{value:function(t,n){function o(){return new e((function(e,o){r(t,n,e,o)}))}return a=a?a.then(o,o):o()}})}function T(e,r,n){var o=y;return function(i,a){if(o===v)throw Error("Generator is already running");if(o===m){if("throw"===i)throw a;return{value:t,done:!0}}for(n.method=i,n.arg=a;;){var c=n.delegate;if(c){var u=_(c,n);if(u){if(u===g)continue;return u}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(o===y)throw o=m,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);o=v;var l=p(e,r,n);if("normal"===l.type){if(o=n.done?m:d,l.arg===g)continue;return{value:l.arg,done:n.done}}"throw"===l.type&&(o=m,n.method="throw",n.arg=l.arg)}}}function _(e,r){var n=r.method,o=e.iterator[n];if(o===t)return r.delegate=null,"throw"===n&&e.iterator.return&&(r.method="return",r.arg=t,_(e,r),"throw"===r.method)||"return"!==n&&(r.method="throw",r.arg=new TypeError("The iterator does not provide a '"+n+"' method")),g;var i=p(o,e.iterator,r.arg);if("throw"===i.type)return r.method="throw",r.arg=i.arg,r.delegate=null,g;var a=i.arg;return a?a.done?(r[e.resultName]=a.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=t),r.delegate=null,g):a:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,g)}function P(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function C(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function I(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(P,this),this.reset(!0)}function A(e){if(e||""===e){var r=e[u];if(r)return r.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var o=-1,a=function r(){for(;++o<e.length;)if(n.call(e,o))return r.value=e[o],r.done=!1,r;return r.value=t,r.done=!0,r};return a.next=a}}throw new TypeError(i(e)+" is not iterable")}return w.prototype=S,o(O,"constructor",{value:S,configurable:!0}),o(S,"constructor",{value:w,configurable:!0}),w.displayName=f(S,s,"GeneratorFunction"),e.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===w||"GeneratorFunction"===(e.displayName||e.name))},e.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,S):(t.__proto__=S,f(t,s,"GeneratorFunction")),t.prototype=Object.create(O),t},e.awrap=function(t){return{__await:t}},x(j.prototype),f(j.prototype,l,(function(){return this})),e.AsyncIterator=j,e.async=function(t,r,n,o,i){void 0===i&&(i=Promise);var a=new j(h(t,r,n,o),i);return e.isGeneratorFunction(r)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},x(O),f(O,s,"Generator"),f(O,u,(function(){return this})),f(O,"toString",(function(){return"[object Generator]"})),e.keys=function(t){var e=Object(t),r=[];for(var n in e)r.push(n);return r.reverse(),function t(){for(;r.length;){var n=r.pop();if(n in e)return t.value=n,t.done=!1,t}return t.done=!0,t}},e.values=A,I.prototype={constructor:I,reset:function(e){if(this.prev=0,this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(C),!e)for(var r in this)"t"===r.charAt(0)&&n.call(this,r)&&!isNaN(+r.slice(1))&&(this[r]=t)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var r=this;function o(n,o){return c.type="throw",c.arg=e,r.next=n,o&&(r.method="next",r.arg=t),!!o}for(var i=this.tryEntries.length-1;i>=0;--i){var a=this.tryEntries[i],c=a.completion;if("root"===a.tryLoc)return o("end");if(a.tryLoc<=this.prev){var u=n.call(a,"catchLoc"),l=n.call(a,"finallyLoc");if(u&&l){if(this.prev<a.catchLoc)return o(a.catchLoc,!0);if(this.prev<a.finallyLoc)return o(a.finallyLoc)}else if(u){if(this.prev<a.catchLoc)return o(a.catchLoc,!0)}else{if(!l)throw Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return o(a.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,g):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),g},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),C(r),g}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;C(r)}return o}}throw Error("illegal catch attempt")},delegateYield:function(e,r,n){return this.delegate={iterator:A(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),g}},e}function u(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,n)}return r}function l(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?u(Object(r),!0).forEach((function(e){y(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):u(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function s(t,e){if(null==t)return{};var r,n,o=function(t,e){if(null==t)return{};var r={};for(var n in t)if({}.hasOwnProperty.call(t,n)){if(e.includes(n))continue;r[n]=t[n]}return r}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(n=0;n<i.length;n++)r=i[n],e.includes(r)||{}.propertyIsEnumerable.call(t,r)&&(o[r]=t[r])}return o}function f(t,e,r,n,o,i,a){try{var c=t[i](a),u=c.value}catch(t){return void r(t)}c.done?e(u):Promise.resolve(u).then(n,o)}function h(t){return function(){var e=this,r=arguments;return new Promise((function(n,o){var i=t.apply(e,r);function a(t){f(i,n,o,a,c,"next",t)}function c(t){f(i,n,o,a,c,"throw",t)}a(void 0)}))}}function p(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,d(n.key),n)}}function y(t,e,r){return(e=d(e))in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function d(t){var e=function(t){if("object"!=i(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var r=e.call(t,"string");if("object"!=i(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==i(e)?e:e+""}var v=function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.defaultDisplayStyles={},this.skeletonClass="skeleton-loader--client",this.contentRefAttr="data-content-id",this.apiEndpoint="/skeleton_loader/templates"}return e=t,i=[{key:"getSkeletonInstance",value:function(e){return t.activeSkeletons.has(e)||t.activeSkeletons.set(e,this.createSkeletonInstance(e)),t.activeSkeletons.get(e)}},{key:"createSkeletonInstance",value:function(e){var r=this;return{isLoading:function(){return t.loadingStates.get(e)||!1},reveal:function(){var t=document.querySelector("[".concat(r.contentRefAttr,'="').concat(e,'"]')),n=document.getElementById(e);t&&n&&r.revealContent(t,n)}}}},{key:"render",value:(m=h(c().mark((function t(){var e,n,o,i,a,u=arguments;return c().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return n=(e=u.length>0&&void 0!==u[0]?u[0]:{}).contentId,o=e.type,i=void 0===o?"default":o,a=s(e,r),t.abrupt("return",this.processRender(l({contentId:n,mode:"predefined",type:i},a)));case 2:case"end":return t.stop()}}),t,this)}))),function(){return m.apply(this,arguments)})},{key:"renderCustom",value:(v=h(c().mark((function t(){var e,r,n,o=arguments;return c().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(r=(e=o.length>0&&void 0!==o[0]?o[0]:{}).contentId,n=e.markup){t.next=3;break}return t.abrupt("return",this.logError("Custom markup is required"));case 3:return t.abrupt("return",this.processRender({contentId:r,mode:"custom",markup:n}));case 4:case"end":return t.stop()}}),t,this)}))),function(){return v.apply(this,arguments)})},{key:"processRender",value:(d=h(c().mark((function t(e){var r,n,o,i;return c().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(r=e.contentId){t.next=3;break}return t.abrupt("return",this.logError("contentId is required"));case 3:if(!(n=this.getSkeletonInstance(r)).isLoading()){t.next=7;break}return console.warn("Skeleton loading already in progress for ".concat(r)),t.abrupt("return",n);case 7:return t.prev=7,t.next=10,this.initializeLoading(r);case 10:if(o=t.sent){t.next=13;break}return t.abrupt("return",n);case 13:return t.next=15,this.createSkeletonElement(e);case 15:return(i=t.sent)&&this.showSkeleton(i,o),t.abrupt("return",n);case 20:return t.prev=20,t.t0=t.catch(7),console.error("[SkeletonLoader] Render failed:",t.t0),t.abrupt("return",n);case 24:case"end":return t.stop()}}),t,this,[[7,20]])}))),function(t){return d.apply(this,arguments)})},{key:"initializeLoading",value:(y=h(c().mark((function e(r){return c().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t.loadingStates.set(r,!0),e.abrupt("return",this.hideContent(r));case 2:case"end":return e.stop()}}),e,this)}))),function(t){return y.apply(this,arguments)})},{key:"hideContent",value:function(t){var e=document.getElementById(t);if(!e)return console.error("Content not found: #".concat(t)),null;var r=getComputedStyle(e).display;return"none"!==r&&(this.defaultDisplayStyles[t]=r),e.style.display="none",e}},{key:"revealContent",value:function(e,r){var n=r.id;t.loadingStates.get(n)&&(e.remove(),r.style.display=this.defaultDisplayStyles[n],t.loadingStates.set(n,!1))}},{key:"showSkeleton",value:function(t,e){this.clearPreviousSkeleton(e.id),t.setAttribute(this.contentRefAttr,e.id),t.style.display="block",e.parentNode.insertBefore(t,e)}},{key:"clearPreviousSkeleton",value:function(t){document.querySelectorAll("[".concat(this.contentRefAttr,'="').concat(t,'"]')).forEach((function(t){return t.remove()}))}},{key:"createSkeletonElement",value:(f=h(c().mark((function t(e){var r,o,i,a,u,f,h,p;return c().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return r=e.contentId,o=e.mode,i=e.markup,a=void 0===i?null:i,u=e.type,f=s(e,n),h=this.buildParams(l({contentId:r,mode:o,markup:a,type:u},f)),t.prev=2,t.next=5,this.fetchTemplate(h);case 5:return p=t.sent,t.abrupt("return",this.parseTemplateToElement(p,r));case 9:return t.prev=9,t.t0=t.catch(2),console.error("Error creating skeleton:",t.t0),t.abrupt("return",null);case 13:case"end":return t.stop()}}),t,this,[[2,9]])}))),function(t){return f.apply(this,arguments)})},{key:"fetchTemplate",value:(u=h(c().mark((function t(e){var r;return c().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,fetch("".concat(this.apiEndpoint,"?").concat(e.toString()),{method:"GET",headers:{"X-Requested-With":"XMLHttpRequest"}});case 2:if((r=t.sent).ok){t.next=5;break}throw new Error("Failed to fetch skeleton template");case 5:return t.abrupt("return",r.text());case 6:case"end":return t.stop()}}),t,this)}))),function(t){return u.apply(this,arguments)})},{key:"parseTemplateToElement",value:function(t,e){return(new DOMParser).parseFromString(t,"text/html").body.firstElementChild||(console.error("Invalid skeleton template for contentId: ".concat(e)),null)}},{key:"buildParams",value:function(t){var e=t.contentId,r=t.mode,n=t.markup,i=t.type,a=s(t,o),c=new URLSearchParams(l({content_id:e,mode:r,type:i||"default"},this.formatOptions(a)));return n&&c.set("markup",n),c}},{key:"formatOptions",value:function(t){var e=this;return Object.fromEntries(Object.entries(t).map((function(t){var r=function(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var r=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=r){var n,o,i,a,c=[],u=!0,l=!1;try{if(i=(r=r.call(t)).next,0===e){if(Object(r)!==r)return;u=!1}else for(;!(u=(n=i.call(r)).done)&&(c.push(n.value),c.length!==e);u=!0);}catch(t){l=!0,o=t}finally{try{if(!u&&null!=r.return&&(a=r.return(),Object(a)!==a))return}finally{if(l)throw o}}return c}}(t,e)||function(t,e){if(t){if("string"==typeof t)return a(t,e);var r={}.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?a(t,e):void 0}}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(t,2),n=r[0],o=r[1];return[e.toSnakeCase(n),o]})))}},{key:"toSnakeCase",value:function(t){return t.replace(/([A-Z])/g,"_$1").toLowerCase()}},{key:"logError",value:function(t){return console.error("[SkeletonLoader] ".concat(t)),null}}],i&&p(e.prototype,i),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,i,u,f,y,d,v,m}();function m(t){return m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},m(t)}function g(){g=function(){return e};var t,e={},r=Object.prototype,n=r.hasOwnProperty,o=Object.defineProperty||function(t,e,r){t[e]=r.value},i="function"==typeof Symbol?Symbol:{},a=i.iterator||"@@iterator",c=i.asyncIterator||"@@asyncIterator",u=i.toStringTag||"@@toStringTag";function l(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{l({},"")}catch(t){l=function(t,e,r){return t[e]=r}}function s(t,e,r,n){var i=e&&e.prototype instanceof b?e:b,a=Object.create(i.prototype),c=new I(n||[]);return o(a,"_invoke",{value:T(t,r,c)}),a}function f(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}e.wrap=s;var h="suspendedStart",p="suspendedYield",y="executing",d="completed",v={};function b(){}function w(){}function S(){}var k={};l(k,a,(function(){return this}));var E=Object.getPrototypeOf,L=E&&E(E(A([])));L&&L!==r&&n.call(L,a)&&(k=L);var O=S.prototype=b.prototype=Object.create(k);function x(t){["next","throw","return"].forEach((function(e){l(t,e,(function(t){return this._invoke(e,t)}))}))}function j(t,e){function r(o,i,a,c){var u=f(t[o],t,i);if("throw"!==u.type){var l=u.arg,s=l.value;return s&&"object"==m(s)&&n.call(s,"__await")?e.resolve(s.__await).then((function(t){r("next",t,a,c)}),(function(t){r("throw",t,a,c)})):e.resolve(s).then((function(t){l.value=t,a(l)}),(function(t){return r("throw",t,a,c)}))}c(u.arg)}var i;o(this,"_invoke",{value:function(t,n){function o(){return new e((function(e,o){r(t,n,e,o)}))}return i=i?i.then(o,o):o()}})}function T(e,r,n){var o=h;return function(i,a){if(o===y)throw Error("Generator is already running");if(o===d){if("throw"===i)throw a;return{value:t,done:!0}}for(n.method=i,n.arg=a;;){var c=n.delegate;if(c){var u=_(c,n);if(u){if(u===v)continue;return u}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(o===h)throw o=d,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);o=y;var l=f(e,r,n);if("normal"===l.type){if(o=n.done?d:p,l.arg===v)continue;return{value:l.arg,done:n.done}}"throw"===l.type&&(o=d,n.method="throw",n.arg=l.arg)}}}function _(e,r){var n=r.method,o=e.iterator[n];if(o===t)return r.delegate=null,"throw"===n&&e.iterator.return&&(r.method="return",r.arg=t,_(e,r),"throw"===r.method)||"return"!==n&&(r.method="throw",r.arg=new TypeError("The iterator does not provide a '"+n+"' method")),v;var i=f(o,e.iterator,r.arg);if("throw"===i.type)return r.method="throw",r.arg=i.arg,r.delegate=null,v;var a=i.arg;return a?a.done?(r[e.resultName]=a.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=t),r.delegate=null,v):a:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,v)}function P(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function C(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function I(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(P,this),this.reset(!0)}function A(e){if(e||""===e){var r=e[a];if(r)return r.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var o=-1,i=function r(){for(;++o<e.length;)if(n.call(e,o))return r.value=e[o],r.done=!1,r;return r.value=t,r.done=!0,r};return i.next=i}}throw new TypeError(m(e)+" is not iterable")}return w.prototype=S,o(O,"constructor",{value:S,configurable:!0}),o(S,"constructor",{value:w,configurable:!0}),w.displayName=l(S,u,"GeneratorFunction"),e.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===w||"GeneratorFunction"===(e.displayName||e.name))},e.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,S):(t.__proto__=S,l(t,u,"GeneratorFunction")),t.prototype=Object.create(O),t},e.awrap=function(t){return{__await:t}},x(j.prototype),l(j.prototype,c,(function(){return this})),e.AsyncIterator=j,e.async=function(t,r,n,o,i){void 0===i&&(i=Promise);var a=new j(s(t,r,n,o),i);return e.isGeneratorFunction(r)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},x(O),l(O,u,"Generator"),l(O,a,(function(){return this})),l(O,"toString",(function(){return"[object Generator]"})),e.keys=function(t){var e=Object(t),r=[];for(var n in e)r.push(n);return r.reverse(),function t(){for(;r.length;){var n=r.pop();if(n in e)return t.value=n,t.done=!1,t}return t.done=!0,t}},e.values=A,I.prototype={constructor:I,reset:function(e){if(this.prev=0,this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(C),!e)for(var r in this)"t"===r.charAt(0)&&n.call(this,r)&&!isNaN(+r.slice(1))&&(this[r]=t)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var r=this;function o(n,o){return c.type="throw",c.arg=e,r.next=n,o&&(r.method="next",r.arg=t),!!o}for(var i=this.tryEntries.length-1;i>=0;--i){var a=this.tryEntries[i],c=a.completion;if("root"===a.tryLoc)return o("end");if(a.tryLoc<=this.prev){var u=n.call(a,"catchLoc"),l=n.call(a,"finallyLoc");if(u&&l){if(this.prev<a.catchLoc)return o(a.catchLoc,!0);if(this.prev<a.finallyLoc)return o(a.finallyLoc)}else if(u){if(this.prev<a.catchLoc)return o(a.catchLoc,!0)}else{if(!l)throw Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return o(a.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,v):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),v},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),C(r),v}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;C(r)}return o}}throw Error("illegal catch attempt")},delegateYield:function(e,r,n){return this.delegate={iterator:A(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),v}},e}function b(t,e,r,n,o,i,a){try{var c=t[i](a),u=c.value}catch(t){return void r(t)}c.done?e(u):Promise.resolve(u).then(n,o)}function w(t){return function(){var e=this,r=arguments;return new Promise((function(n,o){var i=t.apply(e,r);function a(t){b(i,n,o,a,c,"next",t)}function c(t){b(i,n,o,a,c,"throw",t)}a(void 0)}))}}function S(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,k(n.key),n)}}function k(t){var e=function(t){if("object"!=m(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var r=e.call(t,"string");if("object"!=m(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==m(e)?e:e+""}y(v,"loadingStates",new Map),y(v,"activeSkeletons",new Map),(new(function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.SKELETON_CLASS="skeleton-loader--server",this.CONTENT_ID_ATTR="data-content-id",this.contentsDisplayStyles={}}return e=t,r=[{key:"start",value:function(){return this.setupInitialLoading(),this.setupContentsSwap(),this}},{key:"setupInitialLoading",value:function(){var t=this;document.addEventListener("DOMContentLoaded",(function(){t.captureContentsDisplayStyles(),t.hideContents(),t.showSkeletons()}))}},{key:"setupContentsSwap",value:function(){var t=this;window.addEventListener("load",w(g().mark((function e(){return g().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t.revealContent();case 2:return e.abrupt("return",e.sent);case 3:case"end":return e.stop()}}),e)}))))}},{key:"captureContentsDisplayStyles",value:function(){var e=this;document.querySelectorAll(".".concat(t.SKELETON_CLASS)).forEach((function(r){var n=r.getAttribute(t.CONTENT_ID_ATTR),o=document.getElementById(n);if(o){var i=getComputedStyle(o).display||"block";e.contentsDisplayStyles[n]=i}else console.warn('Content element with id "'.concat(n,'" not found'))}))}},{key:"showSkeletons",value:function(){document.querySelectorAll(".".concat(t.SKELETON_CLASS)).forEach((function(t){t.style.display="block"}))}},{key:"revealContent",value:(o=w(g().mark((function t(){return g().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:this.hideSkeletons(),this.showContents();case 2:case"end":return t.stop()}}),t,this)}))),function(){return o.apply(this,arguments)})},{key:"hideSkeletons",value:function(){document.querySelectorAll(".".concat(t.SKELETON_CLASS)).forEach((function(t){t.style.display="none"}))}},{key:"showContents",value:function(){var e=this;document.querySelectorAll(".".concat(t.SKELETON_CLASS)).forEach((function(r){var n=r.getAttribute(t.CONTENT_ID_ATTR),o=document.getElementById(n);if(o){var i=e.contentsDisplayStyles[n]||"block";o.style.display=i,o.style.visibility="visible"}else console.warn('Content element with id "'.concat(n,'" not found'))}))}},{key:"hideContents",value:function(){document.querySelectorAll(".".concat(t.SKELETON_CLASS)).forEach((function(e){var r=e.getAttribute(t.CONTENT_ID_ATTR),n=document.getElementById(r);n?n.style.display="none":console.warn('Content element with id "'.concat(r,'" not found'))}))}}],n=[{key:"SKELETON_CLASS",get:function(){return"skeleton-loader--server"}},{key:"CONTENT_ID_ATTR",get:function(){return"data-content-id"}}],r&&S(e.prototype,r),n&&S(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,r,n,o}())).start();const E=v;return e.default})()));

data/app/assets/javascripts/skeleton_loader.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

data/app/assets/stylesheets/skeleton_loader.css

@@ -0,0 +1,83 @@
+.skeleton-loading {
+    background-color: #e0e0e0;
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+/* Animation Keyframes */
+@keyframes skeleton-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+@keyframes skeleton-flow {
+    0% { opacity: 0.6; }
+    50% { opacity: 0.3; }
+    100% { opacity: 0.6; }
+}
+
+@keyframes skeleton-shine {
+    0% { background-position: -201% center; }
+    100% { background-position: 198% center; }
+}
+
+@keyframes skeleton-gradient {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+@keyframes skeleton-neon {
+    0% {
+        background: #e0e0e0;
+        box-shadow: 0 0 5px rgba(224, 224, 224, 0.5);
+    }
+    50% {
+        background: #e8e8e8;
+        box-shadow: 0 0 15px rgba(224, 224, 224, 0.8);
+    }
+    100% {
+        background: #e0e0e0;
+        box-shadow: 0 0 5px rgba(224, 224, 224, 0.5);
+    }
+}
+
+@keyframes skeleton-breathing {
+    0%, 100% {
+        transform: scale(1);
+        opacity: 0.7;
+    }
+    50% {
+        transform: scale(1.02);
+        opacity: 0.9;
+    }
+}
+
+/* Animation Classes */
+.sl-pulse {
+    animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+.sl-flow {
+    animation: skeleton-flow 2s ease-in-out infinite;
+}
+
+.sl-shine {
+    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 76%);
+    background-size: 200% 100%;
+    animation: skeleton-shine 1.5s ease-in-out infinite;
+}
+
+.sl-gradient {
+    background: linear-gradient(-45deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
+    background-size: 400% 400%;
+    animation: skeleton-gradient 2s ease-in-out infinite;
+}
+
+.sl-neon {
+    animation: skeleton-neon 2s ease-in-out infinite;
+}
+
+.sl-breathing {
+    animation: skeleton-breathing 2s ease-in-out infinite;
+}

data/app/controllers/skeleton_loader/skeleton_loader_controller.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module SkeletonLoader
+  # Handles async requests to generate and render loading skeletons
+  class SkeletonLoaderController < ActionController::Base
+    def show
+      content_id = params[:content_id]
+      mode = params[:mode]
+      wrapped_content = mode == "custom" ? handle_custom_template(content_id) : handle_predefined_template(content_id)
+      render html: wrapped_content
+    rescue StandardError => e
+      handle_error(e)
+    end
+
+    private
+
+    def handle_predefined_template(content_id)
+      options = process_params
+      SkeletonElementGenerator.generate(
+        content_id: content_id,
+        options: options,
+        context: :controller
+      )
+    end
+
+    def handle_custom_template(content_id)
+      markup = params[:markup]
+      SkeletonElementGenerator.generate(
+        content_id: content_id,
+        context: :controller
+      ) { markup }
+    end
+
+    def process_params
+      params_to_process = params.to_unsafe_h
+                                .except("controller", "action", "format", "content_id", "mode", "markup")
+                                .transform_keys(&:to_sym)
+
+      convert_numeric_params(params_to_process)
+      params_to_process
+    end
+
+    def convert_numeric_params(params)
+      %i[scale count width per_row].each do |key|
+        params[key] = params[key].to_f if key == :scale && params[key]
+        params[key] = params[key].to_i if %i[count width per_row].include?(key) && params[key]
+      end
+    end
+
+    def handle_error(error)
+      Rails.logger.error "SkeletonLoader Error: #{error.message}"
+      Rails.logger.error error.backtrace.join("\n")
+
+      render json: {
+        error: error.message,
+        backtrace: Rails.env.development? ? error.backtrace : []
+      }, status: :unprocessable_entity
+    end
+  end
+end