/*
 * loader-fix.css
 * Apache Superset 6.1.x
 *
 * PURPOSE
 * -------
 * Replace Superset 6.1 native loaders with a custom
 * blue circular spinner.
 *
 * IMPORTANT
 * ---------
 * - Does NOT modify tables
 * - Does NOT modify table dimensions
 * - Does NOT modify grids
 * - Does NOT modify application layout
 * - Does NOT modify ant-spin-container
 * - Does NOT modify ant-spin-nested-loading
 *
 * The main Superset loader is identified by:
 *
 *     data-test="loading-indicator"
 *
 * Superset 6.1 Loading component:
 *
 *     class="loading ..."
 *     data-test="loading-indicator"
 */


/* ============================================================
   1. SUPSERSET NATIVE LOADER WRAPPER
   ============================================================ */

/*
 * IMPORTANT:
 *
 * We DO NOT use:
 *
 *     display: none
 *
 * on the wrapper.
 *
 * The wrapper controls positioning of the loader.
 *
 * Instead we keep the wrapper and replace its spinner.
 */

[data-test="loading-indicator"] {

    position: relative !important;

    box-sizing: border-box !important;

}


/* ============================================================
   2. HIDE SUPSERSET NATIVE SVG
   ============================================================ */

/*
 * Superset 6.1 Loading component normally renders:
 *
 *     <div data-test="loading-indicator">
 *         <svg ...>
 *     </div>
 *
 * Hide only the spinner image itself.
 */

[data-test="loading-indicator"] > svg {

    display: none !important;

    visibility: hidden !important;

    opacity: 0 !important;

}


/* ============================================================
   3. HIDE SUPSERSET NATIVE IMAGE
   ============================================================ */

/*
 * Loading can also use:
 *
 *     brandSpinnerSvg
 *     brandSpinnerUrl
 *     explicit image
 *
 * Those are rendered as <img>.
 */

[data-test="loading-indicator"] > img {

    display: none !important;

    visibility: hidden !important;

    opacity: 0 !important;

}


/* ============================================================
   4. OUR CUSTOM CIRCLE
   ============================================================ */

/*
 * Put our spinner inside the exact same Superset loader
 * container.
 */

[data-test="loading-indicator"]::after {

    content: "" !important;

    display: block !important;

    width: 50px !important;

    height: 50px !important;

    box-sizing: border-box !important;

    border: 4px solid rgba(24, 144, 255, 0.20) !important;

    border-top-color: #1890ff !important;

    border-right-color: #1890ff !important;

    border-radius: 50% !important;

    animation:
        superset-custom-loader-spin
        0.8s
        linear
        infinite !important;

}


/* ============================================================
   5. SMALL SUPSERSET LOADER
   ============================================================ */

/*
 * Superset uses size="s" for some dashboard loaders.
 *
 * Keep a slightly smaller custom spinner there.
 */

[data-test="loading-indicator"].loading.s::after {

    width: 40px !important;

    height: 40px !important;

    border-width: 4px !important;

}


/* ============================================================
   6. MEDIUM SUPSERSET LOADER
   ============================================================ */

[data-test="loading-indicator"].loading.m::after {

    width: 50px !important;

    height: 50px !important;

    border-width: 4px !important;

}


/* ============================================================
   7. LARGE SUPSERSET LOADER
   ============================================================ */

[data-test="loading-indicator"].loading.l::after {

    width: 60px !important;

    height: 60px !important;

    border-width: 5px !important;

}


/* ============================================================
   8. SUPSERSET INLINE-CENTERED LOADER
   ============================================================ */

/*
 * Superset uses:
 *
 *     position="inline-centered"
 *
 * on several pages.
 *
 * The wrapper itself handles centering.
 *
 * We only replace the spinner.
 */

[data-test="loading-indicator"].inline-centered::after {

    margin-left: auto !important;

    margin-right: auto !important;

}


/* ============================================================
   9. SUPSERSET FLOATING LOADER
   ============================================================ */

/*
 * Superset's native Loading component uses:
 *
 *     position="floating"
 *
 * by default.
 *
 * Keep its native positioning.
 */

[data-test="loading-indicator"].floating {

    position: absolute !important;

}


/* ============================================================
   10. ANT DESIGN SPINNER
   ============================================================ */

/*
 * Hide Ant Design's actual spinner.
 *
 * DO NOT hide its containers.
 */

.ant-spin {

    display: none !important;

    visibility: hidden !important;

    opacity: 0 !important;

}


.ant-spin-dot {

    display: none !important;

    visibility: hidden !important;

    opacity: 0 !important;

}


.ant-spin-dot-item {

    display: none !important;

    visibility: hidden !important;

    opacity: 0 !important;

}


/*
 * NEVER hide:
 *
 * .ant-spin-container
 * .ant-spin-nested-loading
 */


/* ============================================================
   11. OLD LOADING IMAGES
   ============================================================ */

/*
 * These are old/static loader assets.
 *
 * Do NOT hide normal images.
 */

img[src*="loading.gif"],
img[src*="loading.png"],
img[src*="loading.svg"],
img[src*="loading.cff8a5da"] {

    display: none !important;

    visibility: hidden !important;

    opacity: 0 !important;

}


/* ============================================================
   12. CUSTOM FULL PAGE LOADER
   ============================================================ */

/*
 * This is separate from the Superset native loader.
 *
 * JS can use this when you explicitly want a full-page
 * loading indicator.
 */

#custom-loader-overlay {

    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;

    height: 100vh !important;

    display: none !important;

    align-items: center !important;

    justify-content: center !important;

    flex-direction: column !important;

    background: transparent !important;

    z-index: 999999 !important;

    pointer-events: none !important;

}


#custom-loader-overlay.active {

    display: flex !important;

}


/* ============================================================
   13. CUSTOM FULL PAGE SPINNER
   ============================================================ */

#custom-loader-overlay .custom-loader-spinner {

    width: 50px !important;

    height: 50px !important;

    box-sizing: border-box !important;

    border: 4px solid rgba(24, 144, 255, 0.20) !important;

    border-top-color: #1890ff !important;

    border-right-color: #1890ff !important;

    border-radius: 50% !important;

    animation:
        superset-custom-loader-spin
        0.8s
        linear
        infinite !important;

}


/* ============================================================
   14. CUSTOM FULL PAGE TEXT
   ============================================================ */

#custom-loader-overlay .custom-loader-label {

    margin-top: 14px !important;

    color: #666 !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;

    font-size: 14px !important;

    line-height: 20px !important;

    text-align: center !important;

}


/* ============================================================
   15. INLINE CUSTOM LOADER
   ============================================================ */

.custom-loader-inline {

    display: inline-block !important;

    width: 30px !important;

    height: 30px !important;

    box-sizing: border-box !important;

    border: 3px solid rgba(24, 144, 255, 0.20) !important;

    border-top-color: #1890ff !important;

    border-right-color: #1890ff !important;

    border-radius: 50% !important;

    animation:
        superset-custom-loader-spin
        0.8s
        linear
        infinite !important;

}


/* ============================================================
   16. ANIMATION
   ============================================================ */

@keyframes superset-custom-loader-spin {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}


/* ============================================================
   17. IMPORTANT — DO NOT TOUCH TABLES
   ============================================================ */

/*
 * NO RULES FOR:
 *
 * table
 * thead
 * tbody
 * tr
 * th
 * td
 *
 * .ant-table
 * .ant-table-container
 * .ant-table-body
 *
 * .ReactVirtualized__Grid
 * .ReactVirtualized__Table
 *
 * This is intentional.
 */