UI mask and elements not visible after Async scene change

Question

i have an async loading scene system that redirects to a loading scene and then to the target scene. The function works properly although i found out that some UI elements dont work directly on scene load. For instance i have a ui bar that acts as a fill bar for objectives, (as you collect points it increments) which when i run the scene directly works fine but as soon as i load that scene async i need to manually enable the object or have it get enabled with a button press to work.

i call the loading through this function

Utilities.LoadSceneLoading(Utilities.Scene.GameScene, Utilities.Scene.LoadingSceneGame);

The actual function is this

  private class LoadingMono : MonoBehaviour { }

  private static Action onLoaderCallback;
  private static AsyncOperation asyncOperation;

    public static void LoaderCallback()
    {
        if (onLoaderCallback != null)
        {
            onLoaderCallback();
            onLoaderCallback = null;
        }
    }

    public static void LoadSceneLoading(Scene scene, Scene _loadingScene)
    {
        onLoaderCallback = () =>
        {
            GameObject loadingObject = new GameObject("Loading GO");
            loadingObject.AddComponent<LoadingMono>().StartCoroutine(LoadSceneAsync(scene));

        };
        SceneManager.LoadScene(_loadingScene.ToString());
    }

    private static IEnumerator LoadSceneAsync(Scene scene)
    {
        yield return null;
        asyncOperation = SceneManager.LoadSceneAsync(scene.ToString());

        while (!asyncOperation.isDone)
        {
            yield return null;
        }

    }

And in the loading scene i have this script that get enabled after an animation event

public class LoaderCallback : MonoBehaviour
{
    private bool isFirstUpdate = true;

    private void Update()
    {
        if (isFirstUpdate)
        {
            
            Utilities.LoaderCallback();
            isFirstUpdate = false;
        }
    }
}

and the object that enables it is this

  private void Update()
    {
        ShowScene();
    }

 void ShowScene()
    {
        if (canMove)
        {
            time -= Time.deltaTime;
            if (time <= 0)
            {
                loaderCallback.enabled = true;
            }
        }

    }

    public void EnableCallBack()
    {
        canMove = true;
    }

The whole process works fine as i need it to but i have those issues with the UI which for now , for the count bar , i have kind of fixed by having it inactive on start and enable it on the play button press but since i do have more elements and i dont want to have to try it out everytime i add something i would like some help in understanding why it doesnt allow the UI elements to appear! Thank you!

Edit:

basically what it doesnt show is an inverted UI mask that i have.

public class CutoutMaskUI : Image
{
    public override Material materialForRendering {
        get
        {
            Material material = new Material(base.materialForRendering);
            material.SetInt("_StencilComp", (int)CompareFunction.NotEqual);
            return material;
        }
    }
}

i have a UI element acting as a border around an image set to fill in two separate objects, the count bar and a selection bar acting like a clock going around in a circle , these two items do not render on start and if i disable them / enable them in runtime they suddenly appear.

Basicaly the red fill image doesnt get rendered in the circle and the black outline in the count bar

Answer 1

I was having the same problem with the inverted mask, and found this thread in Unity Forums, so I tried what styrbo suggested. But didn't work initially, then I tried changing maskable to false and back to true in the Fix Coroutine, and it worked! So, this is what I added to the CutoutMaskUI class:

protected override void Start()
{
    base.Start();
    StartCoroutine(Fix());
}

/// Fix for async loading scenes
private IEnumerator Fix()
{
    yield return null;
    maskable = false;
    maskable = true;
}