[Feat] Add new dcc.Loading features in dash 2.17

vizro-core/changelog.d/20240523_085359_amward_update_dcc_loading.md

@@ -0,0 +1,49 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+
+### Changed
+
+- Made components visible with added opacity while loading. Updated the minimum Dash version requirement to 2.17.0 to incorporate these new dcc.Loading features. ([#487](https://github.com/mckinsey/vizro/pull/487))
+
+-->
+
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

vizro-core/pyproject.toml

@@ -16,7 +16,7 @@ classifiers = [
 ]
 dependencies = [
   # Temporarily set an upper limit on dash: https://github.com/plotly/dash/issues/2778
-  "dash>=2.14.1, !=2.16.0",  # 2.14.1 needed for compatibility with werkzeug
+  "dash>=2.17.0",  # 2.17.0 needed for new features on loading spinner
   "dash_bootstrap_components",
   "dash-ag-grid>=31.0.0",
   "pandas",

vizro-core/snyk/requirements.txt

@@ -1,4 +1,4 @@
-dash>=2.14.1, !=2.16.0
+dash>=2.17.0
 dash_bootstrap_components
 dash-ag-grid>=31.0.0
 pandas

vizro-core/src/vizro/models/_components/ag_grid.py

@@ -117,4 +117,5 @@ def build(self):
             ],
             color="grey",
             parent_className="loading-container",
+            overlay_style={"visibility": "visible", "opacity": 0.3},
         )

vizro-core/src/vizro/models/_components/graph.py

@@ -136,6 +136,7 @@ def build(self):
             ),
             color="grey",
             parent_className="loading-container",
+            overlay_style={"visibility": "visible", "opacity": 0.3},
         )
 
     @staticmethod

vizro-core/src/vizro/models/_components/table.py

@@ -117,4 +117,5 @@ def build(self):
             ),
             color="grey",
             parent_className="loading-container",
+            overlay_style={"visibility": "visible", "opacity": 0.3},
         )

vizro-core/tests/unit/vizro/models/_components/test_ag_grid.py

@@ -149,6 +149,7 @@ def test_ag_grid_build_with_underlying_id(self, ag_grid_with_id_and_conf, filter
             ],
             color="grey",
             parent_className="loading-container",
+            overlay_style={"visibility": "visible", "opacity": 0.3},
         )
 
         assert_component_equal(ag_grid, expected_ag_grid)

vizro-core/tests/unit/vizro/models/_components/test_graph.py

@@ -154,5 +154,6 @@ def test_graph_build(self, standard_px_chart):
             ),
             color="grey",
             parent_className="loading-container",
+            overlay_style={"visibility": "visible", "opacity": 0.3},
         )
         assert_component_equal(graph, expected_graph)

vizro-core/tests/unit/vizro/models/_components/test_table.py

@@ -146,6 +146,7 @@ def test_table_build_with_underlying_id(self, dash_data_table_with_id, filter_in
             ),
             color="grey",
             parent_className="loading-container",
+            overlay_style={"visibility": "visible", "opacity": 0.3},
         )
 
         assert_component_equal(table, expected_table)