## 2 Literature Review and Cost Estimation Methods
### Coestim--Design Simulator for Creating Construction Projects
### User Interface Design and Optimization through Lazy Loading Concepts

In this stage, the data transmission process between the server and the user interface was analyzed and the implementation of a solution described in more detail was proposed to optimize this process, by implementing a generic component. This component implements a smart dropdown control that replaces the classic control of the same type. This control must be primarily generic, meaning that it can be used anywhere it is needed in the interface. The component that develops this control automatically connects to the server to retrieve the data it needs. The improvement that this control brings is that the data retrieved from the server is paged and not all at once. This aspect improves the response time between the interface and the server. The control is smart because it manages to fetch the data from the next page when the user reaches a certain percentage of the scroll of the already loaded list. So, every time the user will reach a certain scroll percentage of the newly loaded list, the control will try to automatically load the data for the next page without affecting the waiting time but also improving the data loading time. The control also allows data filtering so that you do not need to run the control until all the data in the system are loaded. It is important that the data transmission process between the server and the user interface is as correct and optimized as possible. To improve this process, the most important concepts that can improve waiting times and data transmission from the server to the interface were taken into account: the concept of lazy loading and the concept of paging in the case of retrieving data lists. The concept of lazy loading helps to load the necessary sections and postpone the remaining ones until the user needs them. The opposite of this concept is eager loading, which means that all code will load at once (for example, when the entire web page is loaded for the first time). The eager loading technique has the advantage that all content is available immediately when needed, which is great, but the big disadvantage is that a lot of data are retrieved when a page loads, even data that will never be required (for example, an image that is rendered in a part of the page that will never be visited by the user), which increases the load time of the resources. Since the user interface also uses the Angular language for development, this framework helps to implement this concept quite easily. The framework helps Angular developers decide which modules to use for load initialization or when a function is called. Below is an example of lazy loading used in Angular (see **Algorithm 5**). ```
@NgModule( imports:[BrowserModule, RouterModule.forRoot[ {path: \", component: HomeComponent}, {path: \", product',component: ProductDetailComponent}, {path: \"luxury_loadChildren: () => import(\"./luxury:module').then(m => m.luxuryModule),data: [preloadome:true] ] ] //,{preloadingStrategy: CustomPreloadingStrategy} ] ] ] ] declarations: [AppComponent,HomeComponent,ProductDetailComponent], providers:[{provide: LocationStrategy,useClass: HashLocationStrategy},CustomPreloadingStrategy], bootstrap: [AppComponent ]
```

**Algorithm 5**NgModule--Outline the decision mode in Angular for lazy loading in the database

The concept of lazy loading is recommended and will only apply to resources that are not needed all the time. In this way, lazy loading can provide a benefit and speed up page load time. The implementation of new interfaces for the newly created models from the project was pursued. The SuperService model has been implemented, which offers the possibility of arranging super-services in the form of a tree; so, through theSuperService model, a hierarchy of services can be defined according to the necessary order within a project.