Can't get element by id with delay using selenium webdriver

I'm trying simply get element by id with selenium using Python.

The matter is that testing host is not so fast so load of webpage could last up to 10-15 seconds.

So, I've started with this code:

from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.common.exceptions import TimeoutException

browser = webdriver.Chrome("C:/Users/user/Documents/chromedriver.exe")
browser.get("my_url")
delay = 20 # seconds
try:
    WebDriverWait(browser, delay).until(EC.presence_of_element_located(browser.find_element_by_id('X4')))
    print("Page is ready!")
except TimeoutException:
    print("Loading took too much time!")

However, this code is simply not working with these exceptions:

Traceback (most recent call last):
  File "C:/Users/user/PycharmProjects/testproj/test_scripts/test.py", line 10, in <module>
    WebDriverWait(browser, delay).until(EC.presence_of_element_located(browser.find_element_by_id('X4')))
  File "C:\Program files (x86)\Python\Python36-32\lib\site-packages\selenium-3.4.2-py3.6.egg\selenium\webdriver\remote\webdriver.py", line 285, in find_element_by_id
    return self.find_element(by=By.ID, value=id_)
  File "C:\Program files (x86)\Python\Python36-32\lib\site-packages\selenium-3.4.2-py3.6.egg\selenium\webdriver\remote\webdriver.py", line 787, in find_element
    'value': value})['value']
  File "C:\Program files (x86)\Python\Python36-32\lib\site-packages\selenium-3.4.2-py3.6.egg\selenium\webdriver\remote\webdriver.py", line 252, in execute
    self.error_handler.check_response(response)
  File "C:\Program files (x86)\Python\Python36-32\lib\site-packages\selenium-3.4.2-py3.6.egg\selenium\webdriver\remote\errorhandler.py", line 194, in check_response
    raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"id","selector":"X4"}

which is simply saying: "There is no such element on page".

It's weird, that stacktrace gets printed even before full page load, so there is no clue for me what is happening.

Also I've tried to get other id's with no luck - seems like the problem not related to certain element.

Here is the source of page around element that I'm trying to retrieve:

<div id="X4Edit" class="mandatoryFieldStyle xEdit file_Todo field_L_switch_inbox value_Todo" style="height:20px;">
    <div class="xEditInner" style="height:100%;">
        <input type="text" id="X4" value="Todo list" scripttype="combo" tabindex="" datachangeevent="817" 
               onkeydown="widgets.Combo.keyDown(event, 'X4');" 
               dvdvar="var/L.switch.inbox" buttonid="" reflabels="" onkeyup="widgets.Combo.keyUp(event, 'X4');" 
               alias="var/L.switch.inbox" name="var/L.switch.inbox" 
               autocomplete="off" role="combobox" aria-autocomplete="list" aria-owns="X4Popup_div" aria-activedescendant="X4Popup_div" 
               aria-haspopup="true" aria-expanded="false" maxlength="" style="
                height:18px;margin-top:1px;
                " selectonly="1" onfocus="widgets.Combo.handleOnFocus(this, event);" onblur="widgets.Combo.handleOnBlur(this, event);" 
               onclick="handleOnClick(this, event);" onchange="handleOnChange(this, event);">
    </div>
    <div id="X4ButtonDiv" class="xButton" tabindex="-1" style="">
        <a href="javascript:widgets.Combo.togglePopup('X4', true);void(0);" tabindex="-1" class="image-link" draggable="false" role="presention">
          <img id="X4Button" src="images/comboup.png" alt="" draggable="false" tabindex="-1">
        </a>
    </div>
</div>

So, how do I properly retrieve this combo box by id? Hereinafter would like to try to set it's state then.