How not to show pre-loader when Form submit failed

Ask the community
,
1

I created a user input form. When the form is being submitted, I put a pre-loader box over the Submit button to prevent user clicking submit button again while the form being submitted to the dataset. My problem is, If the form submit failed, These box also appeared, I tried using many methods from old posts but nothing seems to work. Here are the code methods which I tried:
id: #text171 : Error message Text.
id #saveBox: Preloader Box over submit button.
I’m new to Velo here and I don’t have good coding knowledge.
Method1:

$w.onReady(function () {
if($w("#text171").isVisible === false) {
    $w("#dataset1").onBeforeSave(() => {
        $w("#saveBox").show('FadeIn');
    })
 
    $w("#dataset1").onAfterSave(() => {
        $w("#saveBox").hide('FadeOut');
    })
 
}
});

Method 2:

export function submitbtn_click(event) {
 if($w("#text171").isVisible === true) {
    $w("#saveBox").hide();

 } else {
      $w("#dataset1").onBeforeSave(() => {
        $w("#saveBox").show('FadeIn');
    })
   $w("#dataset1").onAfterSave(() => {
        $w("#saveBox").hide('FadeOut');
    })  
 }

Method 3:
*This method won’t even work.

$w.onReady(function () {

 if($w("#dataset1").onError() === true) {
     $w("#saveBox").hide();
 } else {
 $w("#dataset1").onBeforeSave(() => {
        $w("#saveBox").show('FadeIn');
    })
    }
 

   $w("#dataset1").onAfterSave(() => {
        $w("#saveBox").hide('FadeOut');
    })   
 
});

Method 4:

export function text171_viewportEnter(event) {
    $w("#saveBox").hide();

}