Enhancement: UI improvements (#2164)

* enhancement: show loader while loading gird/gallery data

re #2150

Signed-off-by: Pranav C <pranavxc@gmail.com>

* enhancement: add icon for select option in filter/sort

Signed-off-by: Pranav C <pranavxc@gmail.com>

* enhancement: show loader and transitions

- add transition for menu
- include icon within select(fileter/sort)
- show loader while loading data(grid/gallery)
- remove announcement

Signed-off-by: Pranav C <pranavxc@gmail.com>

* refactor: remove announcement component and related state props

Signed-off-by: Pranav C <pranavxc@gmail.com>

* fix: ignore loader while switching tab

Signed-off-by: Pranav C <pranavxc@gmail.com>

* chore: upgrade nc-help

Signed-off-by: Pranav C <pranavxc@gmail.com>

* test/kludge: avoid flicker with a delay

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>

Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>

scripts/cypress/integration/common/3a_filter_sort_fields_operations.js

@@ -49,6 +49,8 @@ export const genTest = (apiType, dbType) => {
 
                 // verify
                 mainPage.getPagination(5).click();
+                // kludge: flicker on load
+                cy.wait(3000)
                 mainPage
                     .getCell("Country", 10)
                     .contains("Test Country")

scripts/cypress/integration/common/4c_form_view_detailed.js

@@ -517,6 +517,9 @@ export const genTest = (apiType, dbType) => {
                 // clean up newly added rows into Country table operations
                 // this auto verifies successfull addition of rows to table as well
                 mainPage.getPagination(5).click();
+                // kludge: flicker on load
+                cy.wait(3000)
+
                 cy.get(".nc-grid-row").should("have.length", 13);
                 mainPage
                     .getRow(10)

scripts/cypress/integration/common/4e_form_view_share.js

@@ -208,6 +208,9 @@ export const genTest = (apiType, dbType) => {
                 // clean up newly added rows into Country table operations
                 // this auto verifies successfull addition of rows to table as well
                 mainPage.getPagination(25).click();
+                // kludge: flicker on load
+                cy.wait(3000)
+
                 cy.get(".nc-grid-row").should("have.length", 1);
                 mainPage
                     .getRow(1)

scripts/cypress/integration/common/4f_grid_view_share.js

@@ -396,6 +396,9 @@ export const genTest = (apiType, dbType) => {
 
             // delete row
             mainPage.getPagination(5).click();
+            // kludge: flicker on load
+            cy.wait(3000)
+
             // wait for page rendering to complete
             cy.get(".nc-grid-row").should("have.length", 10);
             mainPage

scripts/cypress/integration/common/4f_pg_grid_view_share.js

@@ -390,6 +390,9 @@ export const genTest = (apiType, dbType) => {
 
             // delete row
             mainPage.getPagination(5).click();
+            // kludge: flicker on load
+            cy.wait(3000)
+
             // wait for page rendering to complete
             cy.get(".nc-grid-row").should("have.length", 10);
             mainPage

scripts/cypress/integration/common/6f_attachments.js

@@ -17,6 +17,9 @@ export const genTest = (apiType, dbType) => {
             // clean up newly added rows into Country table operations
             // this auto verifies successfull addition of rows to table as well
             mainPage.getPagination(5).click();
+            // kludge: flicker on load
+            cy.wait(3000)
+
             // wait for page rendering to complete
             cy.get(".nc-grid-row").should("have.length", 10);
             mainPage

scripts/cypress/support/commands.js

@@ -180,6 +180,8 @@ Cypress.Commands.add("openTableTab", (tn, rc) => {
         cy.get(".nc-grid-row").should("have.length", rc);
     }
 
+    // kludge: add delay to skip flicker
+    cy.wait(3000)
     cy.snip(`GridView_${tn}`);
 });