diff --git a/.gitignore b/.gitignore index a901891..d246705 100644 --- a/.gitignore +++ b/.gitignore @@ -63,4 +63,6 @@ venv.bak/ # Other Video -.idea/ \ No newline at end of file +.idea/ +# kill_django.sh is a script to kill the Django server only for developement purposes +kill_django.sh diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue index c37231d..5919c7e 100644 --- a/frontend/src/views/HomeView.vue +++ b/frontend/src/views/HomeView.vue @@ -9,6 +9,7 @@ import { onBeforeRouteLeave } from 'vue-router' const selectedOption = ref('film') const searchedTitle = ref('') const searchResults = ref([]) +const loading = ref(false) const storeSearchResults = () => { localStorage.setItem('searchResults', JSON.stringify(searchResults.value)) @@ -30,8 +31,10 @@ watch(searchResults, storeSearchResults, { deep: true }) retrieveSearchResults() function searchTitle() { + loading.value = true search(searchedTitle.value, selectedOption.value).then((res) => { searchResults.value = res.data.media + loading.value = false }).catch((err) => { console.log(err) }) @@ -44,14 +47,17 @@ function searchTitle() { @@ -119,6 +125,28 @@ function searchTitle() { width: 250px; } +.loader { + width: 12px; + height: 12px; + border: 1px solid #FFF; + border-bottom-color: transparent; + border-radius: 50%; + display: inline-block; + box-sizing: border-box; + animation: rotation 1s linear infinite; + margin-left: 15px; + margin-right: 16px; + } + + @keyframes rotation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + @media (max-width: 768px) { .card-container { grid-template-columns: repeat(2, 1fr);