# 23rd July Report

## Progress

Time: **08:55**
Event: Entering the lab

---

### Implement loading screen for all pages

Time: **10:00**
- We can refer to the previous report that to implemnt loading screen in Ionic project is like [this](https://hackmd.io/@muhamadaldy/rydTsYffS#Loading-bar-when-load-data-from-API).
- To prevent that `dismissLoadCtrl()`, the function to dismiss or remove the loading screen, is being called before `createLoadCtrl()`, the function to create and display the loading screen, then we should call create with `await`.
- This means that inside the **`async`** the code that use `await`, usually when calling a function, will return Promise.
- Code that return a Promise will be run first and the code after it will listen if the Promise return success or failed value.
- In this case, it prevent to dismiss the loading screen before create it first.
- In the code will be:

async ngOnInit () {
    // create loading screen
    await this.createLoadCtrl();
    
    ...
    
    // dismiss the loading screen
    this.dismissLoadCtrl();    
}

- Result in some of the pages:
- Register page

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/31-01.gif" style="max-height: 400px" />
</center>
<br>

- Nearby dispenser

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/31-02.gif" style="max-height: 400px" />
</center>
<br>

- Report problem page

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/31-03.gif" style="max-height: 400px" />
</center>
<br>

---

### Issue due lights out in campus

Time: **11:30**
- Because of the electricity is down and my computer has low battery so I can't resume my progress until the electricity is up.
- The electricity is up again on around 22:00.
- This report is submitted on next day and all the remaining tasks will be catch on next day.
- Remaining tasks:
- Finish maintenance progress issues, due the expected completion time, handling with multiple report, ec.
- Search and implement lazy loading for images.

---

## Conclusion
- Implement loading screen with Loading Controller using two function, one to create and display and the other to dismiss/remove it.
- In order to prevent function to dismiss being called before function to create, using await as asynchronous handler to return Promise so until it being created and displayed it will not run to dismiss/remove it.

---

Time: **18:00**
Event: Leaving the lab

###### tags: `on-intern`