[Feat] Improve background color and loading spinner on loading layout (…

…#598)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

vizro-core/changelog.d/20240725_105946_maximilian_schulz_improved_load_CSS.md

@@ -0,0 +1,47 @@
+<!--
+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
+
+- Add dark mode and loading spinner to the layout loading screen (before Vizro app is shown) ([#598](https://github.com/mckinsey/vizro/pull/598))
+
+<!--
+### Changed
+
+- A bullet item for the Changed 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))
+
+-->
+<!--
+### 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/src/vizro/static/css/loading.css

@@ -0,0 +1,43 @@
+/* Inspired by https://github.com/facultyai/dash-bootstrap-components/blob/5c8f4b40f1100fc00bf2d5c1d671a7815a6b2910/docs/static/loading.css */
+
+/* This creates a dark background in situations where neither dash-loading nor the Vizro app are displayed */
+html {
+  background: rgba(20, 23, 33, 1);
+  min-height: 100vh;
+}
+
+/* The dash-loading Div is present when Dash is initially loading, before the layout is built */
+
+/* The dash-loading-callback Div is present when Dash has loaded, but the layout is still building */
+
+/* Note that the dash-loading-callback Div is present until all elements are loaded, but as soon as the initial page
+elements (before on-page-load) are rendered, it gets pushed outside the viewable area, hence the spinner is not visible
+which is good, as we have individual loading spinners for elements. At the moment, we are not using this class.
+TODO: If we want to use this class, we need to evaluate if this is the best approach.
+ */
+
+/* ._dash-loading-callback, */
+._dash-loading {
+  align-items: center;
+  background: rgba(20, 23, 33, 1);
+  color: transparent;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  position: fixed;
+  width: 100%;
+}
+
+/* Loading spinner */
+
+/* ._dash-loading-callback::after, */
+._dash-loading::after {
+  animation: spinner-border 0.75s linear infinite;
+  border: 0.5rem solid lightgrey;
+  border-radius: 50%;
+  border-right-color: transparent;
+  content: "";
+  display: inline-block;
+  height: 8rem;
+  width: 8rem;
+}