@@ -1,19 +1,24 @@
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import React from 'react';
+import { Route, RouterProvider, createBrowserRouter, createRoutesFromElements } from "react-router-dom";
 import './App.css';
 import Home from "./screens/Home/Home";
 import Podcast from "./screens/Podcast/Podcast";
 import Episode from "./screens/Episode/Episode";
+import Root from "./screens/Root/Root";
 
 const App = () => {
+
+  const router = createBrowserRouter(
+    createRoutesFromElements(
+      <Route path="/" element={<Root/>}>
+          <Route index element={<Home/>}/>
+          <Route exact path="/podcast/:podcastId" element={<Podcast/>}/>
+          <Route exact path="/podcast/:podcastId/episode/:episodeId" element={<Episode/>}/>
+      </Route>
+    )
+  );
+
   return (
-    <Router>
-      <Routes>
-        <Route exact path="/" element={<Home/>}/>
-        <Route exact path="/podcast/:podcastId" element={<Podcast/>}/>
-        <Route exact path="/podcast/:podcastId/episode/:episodeId" element={<Episode/>}/>
-      </Routes>
-    </Router>
+    <RouterProvider router={router}/>
   );
 }
 
 
@@ -0,0 +1,48 @@
+.header-wrapper {
+  position: relative;
+  width: 100%;
+  height: 50px;
+  border-bottom: 1px solid lightgray;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.header-logo {
+  position: relative;
+  align-self: flex-start;
+  text-decoration: none;
+  color: rgb(91, 91, 247);
+  font-weight: bold;
+  font-size: 22px;
+}
+
+.header-indicator {
+  position: relative;
+  display: none;
+  align-self: flex-end;
+  width: 30px;
+  height: 30px;
+  background-color: rgb(91, 91, 247);
+  border-radius: 30px;
+  animation: throb 1s infinite;
+}
+
+.header-indicator.visible {
+  display: block;
+}
+
+@keyframes throb {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 1;
+  }
+}
@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react';
+import { Link, useNavigation } from 'react-router-dom';
+import "./Header.css"
+
+const Header = () => {
+  const navigationIndicatorRef = useRef(null),
+    navigation = useNavigation(),
+    IDLE_STATUS = "idle";
+
+  useEffect(() => {
+    console.log(navigation.state);
+    navigationIndicatorRef.current.className = (navigation.state !== IDLE_STATUS)
+      ? "header-indicator visible"
+      : "header-indicator";
+  }, [navigation.state]);
+
+  return (
+    <header className="header-wrapper">
+      <Link to="/" className="header-logo">Podcaster</Link>
+      <div className="header-indicator" ref={navigationIndicatorRef}></div>
+    </header>
+  );
+}
+
+export default Header;
@@ -25,5 +25,10 @@ export const podcasterSlice = createSlice({
   },
 });
 
-export const { updatePodcaster } = podcasterSlice.actions;
+const { updatePodcaster } = podcasterSlice.actions;
+
+export {
+  updatePodcaster,
+  status,
+} 
 export default podcasterSlice.reducer;
@@ -1,5 +1,4 @@
 import "./Episode.css"
-import React from 'react';
 import {useParams} from 'react-router-dom';
 
 const Episode = () => {
 
@@ -1,9 +1,10 @@
 import "./Home.css"
-import React, {useEffect} from 'react';
+import {useEffect} from 'react';
 import {useSelector, useDispatch} from 'react-redux';
 import moment from "moment/moment";
 import { requestPodcastList } from "../../services/data";
-import {updatePodcaster} from "../../redux/podcasterSlice";
+import {updatePodcaster, status} from "../../redux/podcasterSlice";
+import { Link } from "react-router-dom";
 
 const Home = () => {
   const dispatch = useDispatch(),
@@ -18,7 +19,7 @@ const Home = () => {
       }));
     }
 
-    if (podcaster.status === "ZERO") {
+    if (podcaster.status === status.ZERO || podcaster.status === status.OUTDATED) {
       fetchData();
     }
   }, [podcaster.status]);
@@ -28,6 +29,7 @@ const Home = () => {
     <p className="home-title">Home:</p>
     <p>Estado de la store: {podcaster.status}</p>
     <p>Numero de podcasts: {podcaster.podcastList.length}</p>
+    <Link to="/podcast/2">Pulsa aqui para ir al podcast</Link>
   </>);
 }
 
 
@@ -1,5 +1,4 @@
 import "./Podcast.css"
-import React from 'react';
 import {useParams} from 'react-router-dom';
 
 const Podcast = () => {
 
@@ -0,0 +1,13 @@
+import { Outlet } from "react-router";
+import Header from "../../components/Header/Header";
+
+const Root = () => {
+  return (
+    <>
+      <Header/>
+      <Outlet/>
+    </>
+  );
+}
+
+export default Root;
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import "./Episode.css"`
`2`		`-import React from 'react';`
`3`	`2`	`import {useParams} from 'react-router-dom';`
`4`	`3`
`5`	`4`	`const Episode = () => {`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import "./Podcast.css"`
`2`		`-import React from 'react';`
`3`	`2`	`import {useParams} from 'react-router-dom';`
`4`	`3`
`5`	`4`	`const Podcast = () => {`