добавлены state для ui (success, pending), без рендеринга

Author: daria-z

src/js/model.js

@@ -19,6 +19,7 @@ const schema = yup
   );
 
 export const validateInput = () => {
+  state.ui.success = false;
   return schema
     .validate(state.form.inputValue)
     .then(() => {
@@ -38,13 +39,20 @@ export const updateInputValue = (value) => {
 };
 
 const fetchAndParseFeed = (url) => {
+  state.ui.pending = true;
+  //перерендер
   return fetchRssData(url)
     .then((xmlString) => {
+      state.ui.pending = false;
+      state.ui.success = true;
+      //перерендер
       return parseRss(xmlString);
     })
     .catch((error) => {
+      state.ui.pending = false;
+      //тоже перерендер
       throw error;
-    })
+    });
 };
 
 const addNewPosts = (posts) => {

src/js/renderRssFeed.js

@@ -23,6 +23,18 @@ export const renderFeeds = (feeds) => {
   `;
 };
 
+export const renderFeedsPending = () => {
+  const postsContainer = document.querySelector(".feeds");
+  postsContainer.innerHTML = `
+    <div
+      id="posts-spinner"
+      class="spinner-border text-primary d-none"
+      role="status">
+        <span>Загрузка фидов...</span>
+    </div>
+  `;
+};
+
 export const renderPosts = (posts) => {
   const postsContainer = document.querySelector(".posts");
 
@@ -48,8 +60,20 @@ export const renderPosts = (posts) => {
   `;
 };
 
+export const renderPostsPending = () => {
+  const postsContainer = document.querySelector(".posts");
+  postsContainer.innerHTML = `
+    <div
+      id="posts-spinner"
+      class="spinner-border text-primary d-none"
+      role="status">
+        <span>Загрузка постов...</span>
+    </div>
+  `;
+};
+
 export const renderViewedPost = (id) => {
   const viewedPost = document.querySelector(`[data-id="${id}"]`);
   viewedPost.classList.remove("fw-bold");
   viewedPost.classList.add("fw-normal");
-}
+};

src/js/state.js

@@ -16,7 +16,8 @@ const createState = () => {
     activeItem: null,
     ui: {
       error: null,
-      loading: ''
+      pending: false,
+      success: false
     }
   };
 
@@ -51,3 +52,4 @@ const createState = () => {
 
 export default createState;
 
+

src/js/view.js

@@ -33,4 +33,3 @@ export const renderErrors = (error) => {
 export const renderInputValue = (value) => {
   input.value = value;
 };
-