From 3e03208cf5bf7a31e2d984e03dd92f9cf2a7ec18 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 25 Mar 2022 14:26:48 +0100
Subject: [PATCH] Add loading state for ProductsTable component

---
 .../products_table_component.html.haml        | 19 ++++---
 .../products_table_component.scss             | 56 +++++++++++++------
 2 files changed, 48 insertions(+), 27 deletions(-)

diff --git a/app/components/products_table_component/products_table_component.html.haml b/app/components/products_table_component/products_table_component.html.haml
index 7976b1d94b..f9e7073c43 100644
--- a/app/components/products_table_component/products_table_component.html.haml
+++ b/app/components/products_table_component/products_table_component.html.haml
@@ -1,20 +1,21 @@
-= component_controller do
-  #products_page_form
-    #filter_results
+= component_controller(class: "products-table") do
+  .products-table-form
+    .products-table-form_filter_results
       = render(SearchInputComponent.new(value: @search_term, data: reflex_data_attributes(:search_term)))
-    #categories_selector
+    .products-table-form_categories_selector
       = render(SuperSelectorComponent.new(title: "Categories", selected: @categories_selected, items: @categories, data: reflex_data_attributes(:toggle_category)))
-    #producers_selector
+    .products-table-form_producers_selector
       = render(SuperSelectorComponent.new(title: "Producers", selected: @producers_selected, items: @producers, data: reflex_data_attributes(:toggle_producer)))
-    #per-page_selector
+    .products-table-form_per-page_selector
       = render(SelectorComponent.new(title: "#{@per_page_selected[0]} items per page", selected: @per_page_selected, items: @per_page, data: reflex_data_attributes(:toggle_per_page)))
-    #columns_selector
+    .products-table-form_columns_selector
       = render(SelectorComponent.new(title: "Columns", selected: @columns_selected, items: @selectable_columns, data: reflex_data_attributes(:toggle_column)))
 
-  #products_table
+  .products-table_table
     %table
       = render(TableHeaderComponent.new(columns: @columns, sort: @sort, data: reflex_data_attributes(:click_sort)))
       %tbody
         = render(ProductComponent.with_collection(@products, columns: @columns))
-  #pagination
+
+  .products-table-form_pagination
     = render(PaginationComponent.new(pagy: @pagy, data: reflex_data_attributes(:change_page)))
diff --git a/app/components/products_table_component/products_table_component.scss b/app/components/products_table_component/products_table_component.scss
index d98ee56eba..f64c589d50 100644
--- a/app/components/products_table_component/products_table_component.scss
+++ b/app/components/products_table_component/products_table_component.scss
@@ -1,27 +1,47 @@
-#products_page_form {
-  display: grid;
-  grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
-  grid-gap: 10px;
-  margin-bottom: 10px;
-  
-  #filter_results {
-
+.products-table {
+  .products-table-form {
+    display: grid;
+    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
+    grid-gap: 10px;
+    margin-bottom: 10px;
   }
-  #columns_selector {
 
+  .products-table_table {
+    box-shadow: 0 10px 10px -1px rgb(0 0 0 / 10%);
+  }
+
+  .products-table-form_pagination {
+    position: relative;
+    top: -15px;
+
+    nav, .pagination {
+      margin-top: 0;
+      padding-top: 0;
+    }
   }
 }
 
-#products_table {
-  box-shadow: 0 10px 10px -1px rgb(0 0 0 / 10%);
-}
+.products-table.loading {
+  .products-table-form_pagination, .products-table_table {
+    position: relative;
 
-#pagination {
-  position: relative;
-  top: -15px;
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(255, 255, 255, 0.5);
+    }
+  }
 
-  nav, .pagination {
-    margin-top: 0;
-    padding-top: 0;
+  .products-table_table {
+    &:before {
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 50px 50px;
+      background-image: url("../images/spinning-circles.svg");
+    }
   }
 }