loading animation

resources/js/app.js

@@ -8,7 +8,6 @@ import RecentStories from "./components/RecentStories";
 import AvailableSources from './components/AvailableSources';
 import SourceView from './components/SourceView';
 
-
 const app = new Vue({
     el: '#app',
     components: {

resources/js/components/SourceView.vue

@@ -74,10 +74,15 @@
                     </div>
                 </div>
             </div>
-
+            
             <div class="flex justify-center">
+
+                <div v-show="loading">
+                    <lottie-player src="https://assets9.lottiefiles.com/private_files/lf30_bIUWq7.json"  background="transparent"  speed="3"  style="width: 100px; height: 100px;"  loop  autoplay></lottie-player>
+                </div>
+
                 <button
-                    :disabled="loading != 0"
+                    v-show="loading == 0"
                     v-if="moreArticles"
                     @click="fetchNewArticles()"
                     class="ml-4 text-white h-10 flex items-center justify-center px-4 bg-main-link rounded shadow font-medium"
@@ -91,6 +96,7 @@
 
 <script>
 import * as moment from "moment";
+
 export default {
     props: {
         source: Object

resources/views/sources/show.blade.php

@@ -2,4 +2,8 @@
 
 @section('content')
 <source-view :source="{{$source}}" ></source-view>
+@endsection
+
+@section('js')
+<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
 @endsection