[PBNTR-737] Add Loading State to Rails Advanced Table (#4162)

[PBNTR-737](https://runway.powerhrg.com/backlog_items/PBNTR-737)

This PR adds a `loading` prop on the rails side. This prop applied the
loading styles!

<img width="1438" alt="Screenshot 2025-01-23 at 2 23 40 PM"
src="https://github.com/user-attachments/assets/17a3160a-0525-4daa-b1dc-a0366b48ecc5"
/>



**How to test?** Steps to confirm the desired behavior:
1. Go to the Advanced Table Kit page


#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [ ] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [ ] **TESTS** I have added test coverage to my code.

playbook/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -1,15 +1,10 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive: "none", dark: dark }.merge(object.table_props)) do %>
-    <% if content.present? %>
-      <% content.presence %>
-    <% else %>
-      <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions,
-                                                            enable_toggle_expansion: object.enable_toggle_expansion,
-                                                            responsive: object.responsive }) %>
-      <%= pb_rails("advanced_table/table_body", props: { id: object.id,
-                                                         table_data: object.table_data,
-                                                         column_definitions: object.column_definitions,
-                                                         responsive: object.responsive }) %>
-    <% end %>
-  <% end %>
+        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props)) do %>
+          <% if content.present? %>
+            <% content.presence %>
+          <% else %>
+            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading }) %>
+            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading }) %>
+          <% end %>
+        <% end %>
 <% end %>

playbook/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -10,6 +10,8 @@ class AdvancedTable < Playbook::KitBase
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
                                      values: %w[all header none],
                                      default: "header"
+      prop :loading, type: Playbook::Props::Boolean,
+                     default: false
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"

playbook/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -245,7 +245,7 @@ test("toggleExpansionAll button exists and toggles subrows open and closed", asy
 })
 
 
-test("loading state + initialLoadingRowCount prop", () => {
+test("loading state + initialLoadingRowsCount prop", () => {
   render(
     <AdvancedTable
         columnDefinitions={columnDefinitions}

playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb

@@ -0,0 +1,33 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "beta_table", table_data: @table_data, column_definitions: column_definitions, loading: true }) %>

playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_rails.md

@@ -0,0 +1 @@
+The optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided. 

playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md → playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_react.md

@@ -1,3 +1,3 @@
-the optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided. 
+The optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided. 
 
-By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowCount` prop can be used to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.
+By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowsCount` prop can be used to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.

playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -1,6 +1,7 @@
 examples:
   rails:
   - advanced_table_beta: Default (Required Props)
+  - advanced_table_loading: Loading State
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props

playbook/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -16,6 +16,8 @@ class TableBody < Playbook::KitBase
                             default: []
       prop :collapsible_trail, type: Playbook::Props::Boolean,
                                default: true
+      prop :loading, type: Playbook::Props::Boolean,
+                     default: false
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"
@@ -54,7 +56,7 @@ def render_row_and_children(row, column_definitions, current_depth, first_parent
         current_data_attributes = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive })
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading })
 
         if row[:children].present?
           row[:children].each do |child_row|

playbook/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -6,11 +6,15 @@
         <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname(is_first_column: cell_index.zero?), ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
           <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
             <% if cell_index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") && row_index === header_rows.size - 1 %>
-              <button
-                class="gray-icon toggle-all-icon"
-                onclick="expandAllRows(this); event.preventDefault();">
-                <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
-              </button>
+              <% if loading %>
+                <div class="<%= object.loading ? 'loading-toggle-icon' : '' %>"></div>
+              <% else %>
+                <button
+                  class="gray-icon toggle-all-icon"
+                  onclick="expandAllRows(this); event.preventDefault();">
+                  <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
+                </button>
+              <% end %>
             <% end %>
             <%= cell[:label] %>
           <% end %>

playbook/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -8,6 +8,8 @@ class TableHeader < Playbook::KitBase
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
                                      values: %w[all header none],
                                      default: "header"
+      prop :loading, type: Playbook::Props::Boolean,
+                     default: false
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"

playbook/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -2,7 +2,7 @@
         <% object.column_definitions.each_with_index do |column, index| %>
             <% next unless column[:accessor].present? %>
             <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
-                <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
+                <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", classname: object.loading ? "loading-cell" : "" }) do %>
                     <% if collapsible_trail && index.zero? %>
                         <% (1..depth).each do |i| %>
                             <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>

playbook/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -13,6 +13,8 @@ class TableRow < Playbook::KitBase
                                default: true
       prop :table_data_attributes, type: Playbook::Props::HashProp,
                                    default: {}
+      prop :loading, type: Playbook::Props::Boolean,
+                     default: false
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"

playbook/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -78,4 +78,9 @@ $avatar-sizes: (
       }
     }
   }
+  &.dark {
+    [class^=pb_card_kit] {
+      position: absolute;
+    }
+  }
 }