From 2d7498b77bdcbf16b11eb287998adc821c2448af Mon Sep 17 00:00:00 2001 From: Maikel Linke Date: Fri, 8 Mar 2019 14:23:18 +1100 Subject: [PATCH] Hide elements before Angular is loaded The "Loading orders" spinner is still visible from the beginning so that it can be used as indicator for when the page is loaded. Before, the "No orders found" message was visible between page load and Angular initilisation. --- app/assets/stylesheets/admin/angular.css.scss | 4 ++++ app/views/spree/admin/orders/bulk_management.html.haml | 8 ++++---- 2 files changed, 8 insertions(+), 4 deletions(-) create mode 100644 app/assets/stylesheets/admin/angular.css.scss diff --git a/app/assets/stylesheets/admin/angular.css.scss b/app/assets/stylesheets/admin/angular.css.scss new file mode 100644 index 0000000000..bbb1d61c40 --- /dev/null +++ b/app/assets/stylesheets/admin/angular.css.scss @@ -0,0 +1,4 @@ +// https://docs.angularjs.org/api/ng/directive/ngCloak +[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { + display: none !important; +} diff --git a/app/views/spree/admin/orders/bulk_management.html.haml b/app/views/spree/admin/orders/bulk_management.html.haml index 950ec2a45a..2edf04c837 100644 --- a/app/views/spree/admin/orders/bulk_management.html.haml +++ b/app/views/spree/admin/orders/bulk_management.html.haml @@ -49,7 +49,7 @@ %hr.divider.sixteen.columns.alpha.omega{ ng: { show: 'unitsVariantSelected()' } } - %div.sixteen.columns.alpha.omega#group_buy_calculation{ ng: { show: 'unitsVariantSelected()' } } + %div.sixteen.columns.alpha.omega#group_buy_calculation{ ng: { show: 'unitsVariantSelected()', cloak: true } } %div.shared_resource{ :class => "four columns alpha" } %span{ :class => 'three columns alpha' } %input{ type: 'checkbox', :id => 'shared_resource', 'ng-model' => 'sharedResource'} @@ -106,11 +106,11 @@ %h1 = t("admin.orders.bulk_management.loading") - %div{ :class => "sixteen columns alpha", 'ng-show' => '!RequestMonitor.loading && filteredLineItems.length == 0'} + %div{ class: "sixteen columns alpha", ng: {show: '!RequestMonitor.loading && filteredLineItems.length == 0', cloak: true}} %h1#no_results = t("admin.orders.bulk_management.no_results") - .margin-bottom-50{ 'ng-hide' => 'RequestMonitor.loading || filteredLineItems.length == 0' } + .margin-bottom-50{ ng: {hide: 'RequestMonitor.loading || filteredLineItems.length == 0', cloak: true } } %form{ name: 'bulk_order_form' } %table.index#listing_orders.bulk{ :class => "sixteen columns alpha", ng: { show: "initialized" } } %thead @@ -157,7 +157,7 @@ = t("admin.orders.bulk_management.ask") %input{ :type => 'checkbox', 'ng-model' => "confirmDelete" } - %tr.line_item{ 'ng-repeat' => "line_item in filteredLineItems = ( lineItems | filter:quickSearch | selectFilter:supplierFilter:distributorFilter:orderCycleFilter | variantFilter:selectedUnitsProduct:selectedUnitsVariant:sharedResource | orderBy:sorting.predicate:sorting.reverse )", 'ng-class-even' => "'even'", 'ng-class-odd' => "'odd'", ng: { attr: { id: "li_{{line_item.id}}" } } } + %tr.line_item{ ng: {repeat: "line_item in filteredLineItems = ( lineItems | filter:quickSearch | selectFilter:supplierFilter:distributorFilter:orderCycleFilter | variantFilter:selectedUnitsProduct:selectedUnitsVariant:sharedResource | orderBy:sorting.predicate:sorting.reverse )", 'class-even' => "'even'", 'class-odd' => "'odd'", attr: { id: "li_{{line_item.id}}" } } } %td.bulk %input{ :type => "checkbox", :name => 'bulk', 'ng-model' => 'line_item.checked', 'ignore-dirty' => true } %td.order_no{ 'ng-show' => 'columns.order_no.visible' } {{ line_item.order.number }}