[FIXED] How to Identify button state(normal/loading) using selenium?

Issue

After clicking this button via. selenium, the button starts loading as shown. The site is https://quillbot.com/

Button Loading :

This is the button HTML code :

<button class="MuiButtonBase-root MuiButton-root MuiButton-contained QuillButton-sc-12j9igu-0 dkavuo quillArticleBtn jss1419 MuiButton-containedPrimary" tabindex="0" type="button"><span class="MuiButton-label"><div class="jss1421">Paraphrase</div><div class="jss1425" style="opacity: 0; transition: opacity 1100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; visibility: hidden;"></div></span></button>

After the loading/processing, the button is changed back to its normal state.

I know, this is something to do with JavaScript, how can I know when the button is finished loading ? I am basically trying to automate the entire process

Solution

You can do it without use of JavaScript or any additional to Selenium tools and skills.
The "Rephrase" button itself classes are changing between the states.
While the rephrasing process the button element contains several additional class names. One of them is Mui-disabled . So to indicate the rephrasing process is complete / not running now you can validate as following:

self.wait.until(EC.presence_of_element_located((By.XPATH, "//button[contains(@class,'QuillButton') and(not(contains(@class,'Mui-disabled')))]")))

Answered By - Prophet