Ãupdated lab 4, added throttling

Author: cs-pan

labs/lab4/lab4.tex

@@ -111,7 +111,7 @@ \subsection*{Assignments}
   return inventory;
 }
 \end{Code}
-There is a delay of 500 ms befor the component is rendered. Feel free to vary this during the lab. Most of the time you want it to be 0, but increase it when working on the spinner. You can get the data returned by the loader inside a component using a hook:
+There is a delay of 500 ms befor the component is rendered. Feel free to vary this during the lab. Most of the time you want it to be 0, but increase it when working on the spinner. The browser can also simulate a slow network, open the developer tools, find the Network tab, and change the ''No Throttling`` to ''slow 4G``. This is a better option compared to a delay since it can make bugs caused by race conations visualise. You can get the data returned by the loader inside a component using a hook:
 \begin{Code}
 import { useLoaderData } from 'react-router-dom';
 function ComposeSalad() {
@@ -121,7 +121,7 @@ \subsection*{Assignments}
 \end{Code}
 Load your app in a browser and test so the router and loader function works. There is only one ingredient to choose now. \code{ComposeSalad} is the only component using inventory. Remve the import of {inventory} in \code{App}.  
 
-\item Next we will fetch data from the REAS-server. Use the \code{fetch(url, [options])} function to send a http request to the inventory server. It might be easiest to build the url using string concatenation, but you can also check out the \code{URL(url, [base])} class. Browse the documentation of \code{fetch()}. It returns a \code{Promise} that resolves to a \code{Response} object. To get the http body you can use \code{Response.prototype.json()}, which returns yet another \code{Promise}. First fetch the list of foundations, then for each foundation fetch its properties from the server, e.g. \code{fetch(‘http://localhost:8080/extras/Tomat’)}. Fetching the properties of the ingredients are independent actions and to reduce loading time, you must fetch them concurrently. \emph{Hint:} \code{fetch()} returns directly, so it is easy to start several concurrent requests. Use \code{Promise.all()} when you need to wait for several promises. Important! The \code{fetch()}  promise will only reject with a TypeError if a network error occurs. If the server response with an http error code, for example 404, \code{fetch()} will treat this as a valid response. To catch http errors you need to check the response.ok flag:
+\item Next we will fetch data from the REST-server. Use the \code{fetch(url, [options])} function to send a http request to the inventory server. It might be easiest to build the url using string concatenation, but you can also check out the \code{URL(url, [base])} class. Browse the documentation of \code{fetch()}. It returns a \code{Promise} that resolves to a \code{Response} object. To get the http body you can use \code{Response.prototype.json()}, which returns yet another \code{Promise}. First fetch the list of foundations, then for each foundation fetch its properties from the server, e.g. \code{fetch(‘http://localhost:8080/extras/Tomat’)}. Fetching the properties of the ingredients are independent actions and to reduce loading time, you must fetch them concurrently. \emph{Hint:} \code{fetch()} returns directly, so it is easy to start several concurrent requests. Use \code{Promise.all()} when you need to wait for several promises. Important! The \code{fetch()}  promise will only reject with a TypeError if a network error occurs. If the server response with an http error code, for example 404, \code{fetch()} will treat this as a valid response. To catch http errors you need to check the response.ok flag:
 \begin{Code}
 function safeFetchJson(url) {
   return fetch(url)