Skip to content

Commit 979a900

Browse files
nickamantianickamantia
authored
[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.
1 parent 5b6e950 commit 979a900

13 files changed

+70
-23
lines changed

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

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
11
<%= pb_content_tag do %>
2-
<%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive: "none", dark: dark }.merge(object.table_props)) do %>
3-
<% if content.present? %>
4-
<% content.presence %>
5-
<% else %>
6-
<%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions,
7-
enable_toggle_expansion: object.enable_toggle_expansion,
8-
responsive: object.responsive }) %>
9-
<%= pb_rails("advanced_table/table_body", props: { id: object.id,
10-
table_data: object.table_data,
11-
column_definitions: object.column_definitions,
12-
responsive: object.responsive }) %>
13-
<% end %>
14-
<% end %>
2+
<%= 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 %>
3+
<% if content.present? %>
4+
<% content.presence %>
5+
<% else %>
6+
<%= 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 }) %>
7+
<%= 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 }) %>
8+
<% end %>
9+
<% end %>
1510
<% end %>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ class AdvancedTable < Playbook::KitBase
1010
prop :enable_toggle_expansion, type: Playbook::Props::Enum,
1111
values: %w[all header none],
1212
default: "header"
13+
prop :loading, type: Playbook::Props::Boolean,
14+
default: false
1315
prop :responsive, type: Playbook::Props::Enum,
1416
values: %w[none scroll],
1517
default: "scroll"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@ test("toggleExpansionAll button exists and toggles subrows open and closed", asy
245245
})
246246

247247

248-
test("loading state + initialLoadingRowCount prop", () => {
248+
test("loading state + initialLoadingRowsCount prop", () => {
249249
render(
250250
<AdvancedTable
251251
columnDefinitions={columnDefinitions}

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<% column_definitions = [
2+
{
3+
accessor: "year",
4+
label: "Year",
5+
cellAccessors: ["quarter", "month", "day"],
6+
},
7+
{
8+
accessor: "newEnrollments",
9+
label: "New Enrollments",
10+
},
11+
{
12+
accessor: "scheduledMeetings",
13+
label: "Scheduled Meetings",
14+
},
15+
{
16+
accessor: "attendanceRate",
17+
label: "Attendance Rate",
18+
},
19+
{
20+
accessor: "completedClasses",
21+
label: "Completed Classes",
22+
},
23+
{
24+
accessor: "classCompletionRate",
25+
label: "Class Completion Rate",
26+
},
27+
{
28+
accessor: "graduatedStudents",
29+
label: "Graduated Students",
30+
}
31+
] %>
32+
33+
<%= 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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
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 renamed to ‎playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_react.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
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.
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.
22

3-
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.
3+
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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
examples:
22
rails:
33
- advanced_table_beta: Default (Required Props)
4+
- advanced_table_loading: Loading State
45
- advanced_table_beta_subrow_headers: SubRow Headers
56
- advanced_table_collapsible_trail_rails: Collapsible Trail
67
- advanced_table_table_props: Table Props

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ class TableBody < Playbook::KitBase
1616
default: []
1717
prop :collapsible_trail, type: Playbook::Props::Boolean,
1818
default: true
19+
prop :loading, type: Playbook::Props::Boolean,
20+
default: false
1921
prop :responsive, type: Playbook::Props::Enum,
2022
values: %w[none scroll],
2123
default: "scroll"
@@ -54,7 +56,7 @@ def render_row_and_children(row, column_definitions, current_depth, first_parent
5456
current_data_attributes = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
5557

5658
# Additional class and data attributes needed for toggle logic
57-
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 })
59+
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 })
5860

5961
if row[:children].present?
6062
row[:children].each do |child_row|

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,15 @@
66
<%= 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 %>
77
<%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
88
<% if cell_index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") && row_index === header_rows.size - 1 %>
9-
<button
10-
class="gray-icon toggle-all-icon"
11-
onclick="expandAllRows(this); event.preventDefault();">
12-
<%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
13-
</button>
9+
<% if loading %>
10+
<div class="<%= object.loading ? 'loading-toggle-icon' : '' %>"></div>
11+
<% else %>
12+
<button
13+
class="gray-icon toggle-all-icon"
14+
onclick="expandAllRows(this); event.preventDefault();">
15+
<%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
16+
</button>
17+
<% end %>
1418
<% end %>
1519
<%= cell[:label] %>
1620
<% end %>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ class TableHeader < Playbook::KitBase
88
prop :enable_toggle_expansion, type: Playbook::Props::Enum,
99
values: %w[all header none],
1010
default: "header"
11+
prop :loading, type: Playbook::Props::Boolean,
12+
default: false
1113
prop :responsive, type: Playbook::Props::Enum,
1214
values: %w[none scroll],
1315
default: "scroll"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<% object.column_definitions.each_with_index do |column, index| %>
33
<% next unless column[:accessor].present? %>
44
<%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
5-
<%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
5+
<%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", classname: object.loading ? "loading-cell" : "" }) do %>
66
<% if collapsible_trail && index.zero? %>
77
<% (1..depth).each do |i| %>
88
<% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ class TableRow < Playbook::KitBase
1313
default: true
1414
prop :table_data_attributes, type: Playbook::Props::HashProp,
1515
default: {}
16+
prop :loading, type: Playbook::Props::Boolean,
17+
default: false
1618
prop :responsive, type: Playbook::Props::Enum,
1719
values: %w[none scroll],
1820
default: "scroll"

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,4 +78,9 @@ $avatar-sizes: (
7878
}
7979
}
8080
}
81+
&.dark {
82+
[class^=pb_card_kit] {
83+
position: absolute;
84+
}
85+
}
8186
}

0 commit comments

Comments
 (0)