rails_error_dashboard 0.2.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7ded53b39ba42ddedec2dea52df11dc8e69c77376bb8204891e6c4f9d3fc165b
-  data.tar.gz: c0d80a90c1a2f9dff08f82d4bd40dcc2e1f0336ffe443cc5c96420d059b42a64
+  metadata.gz: dfe05c8e6948bea62c2d86897a52a5e761ab2ab129cb90c62bc57a670c9f3f6f
+  data.tar.gz: 91ac00e2be2b1a224d1e3a9783c2e7ca458ae291b8bf84aae797bbefb8ce17cd
 SHA512:
-  metadata.gz: fcd8b1b91f2d6a9563ff137b8ceeb50fd82cbda3738792680a3d08b418a204102be98b3527dce1da6e1495a6a0c0647cc85e0d3a073de53e0657fdb8a4d4b490
-  data.tar.gz: 0f374fc4577b29cc3165ed5ad756243298d1d5c691a9f0e865c974411a9eec3430b544f8abf176b47d8a1e816d7f26b36eff819a9fe483bbf13798aef801f9ae
+  metadata.gz: aaac80a450c66391b8ed83cd761def41db706cd7fe897141fde41e9823c53130d29164449c54a835f2c2e9dce374aba5734c52ef88137ddf899d7e0690cdea71
+  data.tar.gz: 10b8d21fd9b386be8a33817f26b4154519439c4dd07472e9ed6bb4713b07f17dc07d700bd30aebe0b844437999ce74926be6ba4cd8f8cdcd3d87b1a7534c0ba8

data/README.md

@@ -29,7 +29,7 @@ Experience the full dashboard with 480+ realistic Rails errors, LOTR-themed demo
 ---
 
 ### ⚠️ BETA SOFTWARE
-This Rails Engine is in beta and under active development. While functional and tested (1,800+ tests passing, including browser-based system tests), the API may change before v1.0.0. Use in production at your own discretion.
+This Rails Engine is in beta and under active development. While functional and tested (1,895+ tests passing, including browser-based system tests), the API may change before v1.0.0. Use in production at your own discretion.
 
 **Supports**: Rails 7.0 - 8.1 | Ruby 3.2 - 4.0
 
@@ -950,6 +950,7 @@ Thank you to everyone who has contributed to Rails Error Dashboard!
 Special thanks to:
 - [@bonniesimon](https://github.com/bonniesimon) - Turbo helpers production fix
 - [@gundestrup](https://github.com/gundestrup) - Security fixes, dependency updates, CI/CD improvements
+- [@midwire](https://github.com/midwire) - Backtrace line numbers, loading states & skeleton screens
 
 See [CONTRIBUTORS.md](CONTRIBUTORS.md) for the complete list of contributors and their contributions.
 

data/app/views/layouts/rails_error_dashboard.html.erb

@@ -1320,6 +1320,65 @@ body.dark-mode .timeline-item:hover .timeline-content {
 #sidebarToggle:hover i {
   transform: scale(1.1);
 }
+
+/* Skeleton Loading Animations */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.skeleton {
+  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+  border-radius: 4px;
+}
+
+body.dark-mode .skeleton {
+  background: linear-gradient(90deg, #313244 25%, #45475a 50%, #313244 75%);
+  background-size: 200% 100%;
+}
+
+.skeleton-text {
+  height: 1em;
+  width: 60%;
+  margin-bottom: 0.5em;
+}
+
+.skeleton-text-short {
+  width: 40%;
+}
+
+.skeleton-card {
+  height: 80px;
+}
+
+.skeleton-row {
+  height: 48px;
+  margin-bottom: 2px;
+}
+
+.skeleton-chart {
+  height: 250px;
+}
+
+/* Hide skeleton containers by default */
+.loading-skeleton {
+  display: none;
+}
+
+/* Loading spinner for buttons */
+.btn .loading-spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: spinner-border 0.75s linear infinite;
+  vertical-align: middle;
+  margin-right: 0.25em;
+}
     </style>
   </head>
 
@@ -1566,6 +1625,98 @@ body.dark-mode .timeline-item:hover .timeline-content {
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 
+    <!-- Stimulus (for loading state management) -->
+    <script src="https://cdn.jsdelivr.net/npm/@hotwired/stimulus@3.2.2/dist/stimulus.min.js"></script>
+
+    <!-- Loading State Controller -->
+    <script>
+(function() {
+  'use strict';
+  if (typeof Stimulus === 'undefined') return;
+
+  var application = Stimulus.Application.start();
+
+  application.register('loading', class extends Stimulus.Controller {
+    static get targets() {
+      return ['skeleton', 'content', 'submitButton'];
+    }
+
+    connect() {
+      this._boundHideSkeletons = this.hideSkeletons.bind(this);
+      document.addEventListener('turbo:before-stream-render', this._boundHideSkeletons);
+      document.addEventListener('turbo:load', this._boundHideSkeletons);
+    }
+
+    disconnect() {
+      document.removeEventListener('turbo:before-stream-render', this._boundHideSkeletons);
+      document.removeEventListener('turbo:load', this._boundHideSkeletons);
+      if (this._safetyTimeout) clearTimeout(this._safetyTimeout);
+    }
+
+    // Called on filter form submit
+    submit() {
+      this.showSkeletons();
+      this.disableSubmitButtons();
+      this.startSafetyTimeout();
+    }
+
+    // Called on async action button click
+    click(event) {
+      var button = event.currentTarget;
+      if (button.disabled) return;
+
+      button.disabled = true;
+      var originalHTML = button.dataset.loadingOriginalHtml;
+      if (!originalHTML) {
+        button.dataset.loadingOriginalHtml = button.innerHTML;
+      }
+      var spinnerHTML = '<span class="loading-spinner"></span>';
+      var buttonText = button.textContent.trim();
+      button.innerHTML = spinnerHTML + ' ' + buttonText;
+    }
+
+    showSkeletons() {
+      this.skeletonTargets.forEach(function(el) { el.style.display = ''; });
+      this.contentTargets.forEach(function(el) { el.style.display = 'none'; });
+    }
+
+    hideSkeletons() {
+      this.skeletonTargets.forEach(function(el) { el.style.display = 'none'; });
+      this.contentTargets.forEach(function(el) { el.style.display = ''; });
+      this.enableSubmitButtons();
+      if (this._safetyTimeout) clearTimeout(this._safetyTimeout);
+    }
+
+    disableSubmitButtons() {
+      this.submitButtonTargets.forEach(function(btn) {
+        btn.disabled = true;
+        if (!btn.dataset.loadingOriginalHtml) {
+          btn.dataset.loadingOriginalHtml = btn.innerHTML;
+        }
+        var spinnerHTML = '<span class="loading-spinner"></span>';
+        btn.innerHTML = spinnerHTML + ' Loading...';
+      });
+    }
+
+    enableSubmitButtons() {
+      this.submitButtonTargets.forEach(function(btn) {
+        btn.disabled = false;
+        if (btn.dataset.loadingOriginalHtml) {
+          btn.innerHTML = btn.dataset.loadingOriginalHtml;
+          delete btn.dataset.loadingOriginalHtml;
+        }
+      });
+    }
+
+    startSafetyTimeout() {
+      var self = this;
+      this._safetyTimeout = setTimeout(function() {
+        self.hideSkeletons();
+      }, 10000);
+    }
+  });
+})();
+    </script>
 
     <!-- Dashboard JavaScript (inline for production compatibility) -->
 

data/app/views/rails_error_dashboard/errors/index.html.erb

@@ -5,7 +5,7 @@
   <%= turbo_stream_from "error_list" %>
 <% end %>
 
-<div class="py-4">
+<div class="py-4" data-controller="loading">
   <div class="d-flex justify-content-between align-items-center mb-4">
     <h2 class="mb-0"><i class="bi bi-bug-fill text-primary"></i> Error Overview</h2>
     <div class="text-muted">
@@ -20,7 +20,23 @@
 
   <!-- Stats Cards -->
   <div id="dashboard_stats" class="mb-4">
-    <%= render "stats", stats: @stats %>
+    <div data-loading-target="content">
+      <%= render "stats", stats: @stats %>
+    </div>
+    <div class="loading-skeleton" data-loading-target="skeleton">
+      <div class="row g-4">
+        <% 4.times do %>
+          <div class="col-md-3">
+            <div class="card stat-card">
+              <div class="card-body">
+                <div class="skeleton skeleton-text skeleton-text-short mb-2"></div>
+                <div class="skeleton skeleton-card"></div>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
   </div>
 
   <!-- Top Error Types (Only show if there are errors) -->
@@ -77,7 +93,7 @@
   <!-- 7-Day Error Trend (requires chartkick gem) -->
   <% if @stats[:errors_trend_7d]&.any? && respond_to?(:line_chart) %>
     <div class="row g-4 mb-4">
-      <div class="col-md-8">
+      <div class="col-md-8" data-loading-target="content">
         <div class="card">
           <div class="card-header bg-white d-flex justify-content-between align-items-center">
             <h5 class="mb-0"><i class="bi bi-graph-up"></i> 7-Day Error Trend</h5>
@@ -105,7 +121,7 @@
           </div>
         </div>
       </div>
-      <div class="col-md-4">
+      <div class="col-md-4" data-loading-target="content">
         <div class="card">
           <div class="card-header bg-white">
             <h5 class="mb-0"><i class="bi bi-pie-chart"></i> By Severity (7d)</h5>
@@ -120,6 +136,31 @@
         </div>
       </div>
     </div>
+
+    <div class="loading-skeleton" data-loading-target="skeleton">
+      <div class="row g-4 mb-4">
+        <div class="col-md-8">
+          <div class="card">
+            <div class="card-header bg-white">
+              <div class="skeleton skeleton-text" style="width: 200px;"></div>
+            </div>
+            <div class="card-body">
+              <div class="skeleton skeleton-chart"></div>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-4">
+          <div class="card">
+            <div class="card-header bg-white">
+              <div class="skeleton skeleton-text" style="width: 150px;"></div>
+            </div>
+            <div class="card-body">
+              <div class="skeleton skeleton-chart"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   <% end %>
 
   <!-- Active Filters Pills -->
@@ -193,7 +234,10 @@
             class: "btn btn-sm #{params[:reopened] == 'true' ? 'btn-primary' : 'btn-outline-primary'}" %>
       </div>
 
-      <%= form_with url: errors_path, method: :get, class: "row g-3", data: { turbo: false } do %>
+      <%= form_with url: errors_path, method: :get, class: "row g-3", data: { turbo: false, action: "submit->loading#submit" } do %>
+        <% if params[:reopened].present? %>
+          <%= hidden_field_tag :reopened, params[:reopened] %>
+        <% end %>
         <div class="col-md-4">
           <%= text_field_tag :search, params[:search], placeholder: "Search errors...", class: "form-control" %>
         </div>
@@ -320,7 +364,7 @@
         </div>
 
         <div class="col-12 mt-3">
-          <%= submit_tag "Apply Filters", class: "btn btn-primary" %>
+          <%= submit_tag "Apply Filters", class: "btn btn-primary", data: { loading_target: "submitButton" } %>
           <%= link_to "Clear", errors_path, class: "btn btn-outline-secondary" %>
         </div>
       <% end %>
@@ -362,42 +406,52 @@
 
     <div class="card-body p-0">
       <% if @errors.any? %>
-        <div class="table-responsive">
-          <table class="table table-hover mb-0">
-            <thead class="table-light">
-              <tr>
-                <th style="width: 40px;">
-                  <input type="checkbox" id="select-all" class="form-check-input">
-                </th>
-                <th><%= sortable_header("Severity", "severity") %></th>
-                <th><%= sortable_header("Error Type", "error_type") %></th>
-                <th>Message</th>
-                <th><%= sortable_header("Occurrences", "occurrence_count") %></th>
-                <th><%= sortable_header("First / Last Seen", "last_seen_at") %></th>
-
-                <!-- Show App column only when viewing all apps -->
-                <% if @applications.size > 1 && params[:application_id].blank? %>
-                  <th><%= sortable_header("Application", "application_id") %></th>
+        <div data-loading-target="content">
+          <div class="table-responsive">
+            <table class="table table-hover mb-0">
+              <thead class="table-light">
+                <tr>
+                  <th style="width: 40px;">
+                    <input type="checkbox" id="select-all" class="form-check-input">
+                  </th>
+                  <th><%= sortable_header("Severity", "severity") %></th>
+                  <th><%= sortable_header("Error Type", "error_type") %></th>
+                  <th>Message</th>
+                  <th><%= sortable_header("Occurrences", "occurrence_count") %></th>
+                  <th><%= sortable_header("First / Last Seen", "last_seen_at") %></th>
+
+                  <!-- Show App column only when viewing all apps -->
+                  <% if @applications.size > 1 && params[:application_id].blank? %>
+                    <th><%= sortable_header("Application", "application_id") %></th>
+                  <% end %>
+
+                  <% if @platforms.size > 1 %>
+                    <th><%= sortable_header("Platform", "platform") %></th>
+                  <% end %>
+                  <th>Status</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody id="error_list">
+                <% @errors.each do |error| %>
+                  <%= render "error_row", error: error, show_platform: @platforms.size > 1, show_application: (@applications.size > 1 && params[:application_id].blank?) %>
                 <% end %>
+              </tbody>
+            </table>
+          </div>
 
-                <% if @platforms.size > 1 %>
-                  <th><%= sortable_header("Platform", "platform") %></th>
-                <% end %>
-                <th>Status</th>
-                <th></th>
-              </tr>
-            </thead>
-            <tbody id="error_list">
-              <% @errors.each do |error| %>
-                <%= render "error_row", error: error, show_platform: @platforms.size > 1, show_application: (@applications.size > 1 && params[:application_id].blank?) %>
-              <% end %>
-            </tbody>
-          </table>
+          <!-- Pagination -->
+          <div class="p-3">
+            <%== @pagy.series_nav(:bootstrap) if @pagy.pages > 1 %>
+          </div>
         </div>
 
-        <!-- Pagination -->
-        <div class="p-3">
-          <%== @pagy.series_nav(:bootstrap) if @pagy.pages > 1 %>
+        <div class="loading-skeleton" data-loading-target="skeleton">
+          <div class="p-3">
+            <% 5.times do %>
+              <div class="skeleton skeleton-row mb-2"></div>
+            <% end %>
+          </div>
         </div>
       <% else %>
         <div class="text-center py-5">

data/app/views/rails_error_dashboard/errors/show.html.erb

@@ -57,7 +57,7 @@
   }
 </script>
 
-<div class="py-4">
+<div class="py-4" data-controller="loading">
   <!-- Breadcrumbs -->
   <nav aria-label="breadcrumb" class="mb-3">
     <ol class="breadcrumb">
@@ -1214,7 +1214,7 @@
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-          <%= submit_tag "Mark as Resolved", class: "btn btn-success" %>
+          <%= submit_tag "Mark as Resolved", class: "btn btn-success", data: { action: "click->loading#click" } %>
         </div>
       <% end %>
     </div>
@@ -1241,7 +1241,7 @@
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-          <%= submit_tag "Assign", class: "btn btn-primary" %>
+          <%= submit_tag "Assign", class: "btn btn-primary", data: { action: "click->loading#click" } %>
         </div>
       <% end %>
     </div>
@@ -1273,7 +1273,7 @@
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-          <%= submit_tag "Update Priority", class: "btn btn-warning" %>
+          <%= submit_tag "Update Priority", class: "btn btn-warning", data: { action: "click->loading#click" } %>
         </div>
       <% end %>
     </div>
@@ -1315,7 +1315,7 @@
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-          <%= submit_tag "Snooze", class: "btn btn-warning" %>
+          <%= submit_tag "Snooze", class: "btn btn-warning", data: { action: "click->loading#click" } %>
         </div>
       <% end %>
     </div>

data/db/migrate/20260220000003_add_time_series_indexes_to_error_logs.rb

@@ -13,6 +13,8 @@
 #
 # All PostgreSQL-specific — gracefully skipped on SQLite/MySQL.
 class AddTimeSeriesIndexesToErrorLogs < ActiveRecord::Migration[7.0]
+  disable_ddl_transaction!
+
   def up
     return unless postgresql?
 

data/lib/rails_error_dashboard/version.rb

@@ -1,3 +1,3 @@
 module RailsErrorDashboard
-  VERSION = "0.2.0"
+  VERSION = "0.2.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails_error_dashboard
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.1
 platform: ruby
 authors:
 - Anjan Jagirdar
@@ -403,7 +403,7 @@ metadata:
   documentation_uri: https://AnjanJ.github.io/rails_error_dashboard
   bug_tracker_uri: https://github.com/AnjanJ/rails_error_dashboard/issues
 post_install_message: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n
-  \ Rails Error Dashboard v0.2.0\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n\U0001F195
+  \ Rails Error Dashboard v0.2.1\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n\U0001F195
   First time? Quick start:\n   rails generate rails_error_dashboard:install\n   rails
   db:migrate\n   # Add to config/routes.rb:\n   mount RailsErrorDashboard::Engine
   => '/error_dashboard'\n\n\U0001F504 Upgrading from v0.1.x?\n   rails db:migrate\n