Loading icon triggered only when submit button is pressed

I have an app that has multiple inputs and drop downs. They get applied with a submit. I’ve got a loading icon that gets triggered each time I make a selection on the dropdown. I don’t want it to behave this way.
Is there a way that I can make loading icon get triggered only when initially when app starts and when submit button is pressed, not any time in between. Thanks!

This is my CSS loading icon script:

._dash-loading-callback {
position: fixed;
z-index: 100;
}

._dash-loading-callback::after {
content: ‘Loading’;
font-family: sans-serif;
padding-top: 50px;
color: #000;

-webkit-animation: fadein 0.5s ease-in 0.5s forwards; /* Safari, Chrome and Opera > 12.1 */
   -moz-animation: fadein 0.5s ease-in 0.5s forwards; /* Firefox < 16 */
    -ms-animation: fadein 0.5s ease-in 0.5s forwards; /* Internet Explorer */
     -o-animation: fadein 0.5s ease-in 0.5s forwards; /* Opera < 12.1 */
        animation: fadein 0.5s ease-in 0.5s forwards;
/* prevent flickering on every callback */
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;

/* The banner */
opacity: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
text-align: center;
cursor: progress;
z-index: 100000;

background-image: url(//i.imgur.com/kv2oHwT.gif);
background-position: center center;
background-repeat: no-repeat;

}

@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

three reasons why you should buy plotly pro: support open source, get great support, host your plots and dashboards online