/*
 * Custom full-page loading screen for Dash 
 *
 * How it works:
 * 1. Dash injects a div with id="_dash-loading" before your app is rendered.
 * 2. By default, that div just contains the text "Loading…" in the top-left corner.
 * 3. We grab that element with #_dash-loading and turn it into a full-screen flexbox.
 * 4. The original text is hidden (font-size:0) and we render our own GIF with the ::after pseudo-element.
 *
 * Important:
 * - Place your animated GIF inside the `assets` folder (e.g. src/saas_boilerplate/assets/loader.gif).
 * - If you use a different name or location, update the background-image URL below.
 */

._dash-loading {
  /* Make the loader cover the entire viewport */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  /* Center its contents */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Optional: give the page a white backdrop so content doesn't flash behind the loader */
  background-color: #ffffff;

  /* Ensure it sits on top of everything else until Dash finishes rendering */
  z-index: 9999;

  /* Hide the default text */
  font-size: 0;
  color: transparent;
}

/* Inject our animated GIF */
._dash-loading::after {
  content: "";
  width: 160px;              /* Adjust to your GIF size */
  height: 160px;
  background-image: url("/assets/loader.gif");
  background-repeat: no-repeat;
  background-size: contain;
}