From eddf0ad61e52de9f5b730fcb9712ffbeb6eeee98 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Fri, 16 Sep 2022 02:45:10 +0200
Subject: [PATCH] Only show table when any filtered result (#12993)

* Only show table when any filtered result

* Show table when any filtered dictionary items
---
 .../dictionary/dictionary.list.controller.js    | 16 ++++++++++------
 .../src/views/dictionary/list.html              | 17 ++++++++---------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/dictionary/dictionary.list.controller.js b/src/Umbraco.Web.UI.Client/src/views/dictionary/dictionary.list.controller.js
index a6121e3afb..788e438936 100644
--- a/src/Umbraco.Web.UI.Client/src/views/dictionary/dictionary.list.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/dictionary/dictionary.list.controller.js
@@ -7,7 +7,9 @@
  * The controller for listting dictionary items
  */
 function DictionaryListController($scope, $location, dictionaryResource, localizationService, appState, navigationService) {
-    var vm = this;
+
+    const vm = this;
+    
     vm.title = "Dictionary overview";
     vm.loading = false;
     vm.items = [];
@@ -20,11 +22,13 @@ function DictionaryListController($scope, $location, dictionaryResource, localiz
         vm.loading = true;
         
         dictionaryResource.getList()
-            .then(function (data) {
-                vm.items = data;
-                vm.items.forEach(function(item){
-                    item.style = { "paddingLeft": item.level * 10 };
+            .then(data => {
+                let items = data || [];
+                
+                items.forEach(item => {
+                  item.style = { "paddingLeft": item.level * 10 };
                 });
+                vm.items = items;
                 vm.loading = false;
             });
     }
@@ -47,7 +51,7 @@ function DictionaryListController($scope, $location, dictionaryResource, localiz
     vm.createNewItem = createNewItem;
 
     function onInit() {
-        localizationService.localize("dictionaryItem_overviewTitle").then(function (value) {
+        localizationService.localize("dictionaryItem_overviewTitle").then(value => {
             vm.title = value;
         });
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/dictionary/list.html b/src/Umbraco.Web.UI.Client/src/views/dictionary/list.html
index 43fe6c45ec..0acd6ae0a3 100644
--- a/src/Umbraco.Web.UI.Client/src/views/dictionary/list.html
+++ b/src/Umbraco.Web.UI.Client/src/views/dictionary/list.html
@@ -1,9 +1,6 @@
 <div ng-controller="Umbraco.Editors.Dictionary.ListController as vm">
 
-    <umb-load-indicator ng-if="vm.loading">
-    </umb-load-indicator>
-
-    <umb-editor-view ng-if="!vm.loading">
+    <umb-editor-view>
         <umb-editor-header
             name="vm.title"
             hide-alias="true"
@@ -32,7 +29,9 @@
 
           </umb-editor-sub-header>
 
-          <umb-box ng-if="vm.items.length === 0">
+          <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
+
+          <umb-box ng-if="!vm.loading && vm.items.length === 0">
             <umb-box-content class="block-form">
 
               <umb-empty-state size="small">
@@ -42,7 +41,7 @@
             </umb-box-content>
           </umb-box>
 
-          <table class="table table-hover" ng-if="vm.items.length > 0">
+          <table class="table table-hover" ng-show="!vm.loading && vm.filtered.length > 0">
             <caption class="sr-only"><localize key="visuallyHiddenTexts_dictionaryListCaption">Dictionary items</localize></caption>
             <thead>
               <tr>
@@ -51,7 +50,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr ng-repeat="item in vm.filtered = (vm.items | filter: { 'name': vm.filter.searchTerm }) track by $id(item)" style="cursor: pointer;">
+              <tr ng-repeat="item in vm.filtered = (vm.items | filter: { 'name': vm.filter.searchTerm })" class="cursor-pointer">
                 <th>
                   <button type="button" ng-style="item.style" class="btn-reset bold" ng-click="vm.clickItem(item.id)">{{item.name}}</button>
                 </th>
@@ -69,8 +68,8 @@
               </tr>
             </tbody>
           </table>
-     
-          <umb-empty-state ng-if="vm.filtered.length === 0"
+
+          <umb-empty-state ng-if="!vm.loading && vm.filtered.length === 0"
                            position="center">
             <localize key="dictionary_noItemsFound">There were no dictionary items found.</localize>
           </umb-empty-state>