docs: update ( fix wordings ) (#15)

README.md

@@ -1,6 +1,6 @@
 # 🇺🇦 vue-eternal-loading [![Build Status](https://travis-ci.com/ts-pro/vue-eternal-loading.svg?branch=main)](https://travis-ci.com/ts-pro/vue-eternal-loading)
 
-Infinity loading component written on [TypeScript](https://www.typescriptlang.org/) for [Vue 3](https://v3.vuejs.org/). No dependencies.
+The Infinity loading component is written in [TypeScript](https://www.typescriptlang.org/) for [Vue 3](https://v3.vuejs.org/). No dependencies.
 
 ### Features:
 - 4 directional ( top / left / right / bottom)
@@ -35,16 +35,16 @@ npm install @ts-pro/vue-eternal-loading
 ```ts
 const PAGE_SIZE = 5;
 
-// We must pass this method to the component 
-// and it will be call automatically when needed
+// We need to pass this method to the component,
+// and it will be called automatically when needed.
 async function load({ loaded }) {
-  // Load your data from server or anywhere
+  // Load your data from the server or any other source.
   const loadedItems = await loadItems(page);
   items.value.push(...loadedItems);
   page += 1;
-  // Call `loaded` callback with 2 arguments:
-  // 1. How many items we have loaded
-  // 2. Our page size to know when we riched the end
+  // Call the `loaded` callback with 2 arguments:
+  // 1. The number of items we have loaded
+  // 2. Our page size to know when we have reached the end
   loaded(loadedItems.length, PAGE_SIZE);
 }
 ```
@@ -56,10 +56,10 @@ Check out our [vue-eternal-loading docs](https://ts-pro.github.io/vue-eternal-lo
 List releases [vue-eternal-loading releases](https://github.com/ts-pro/vue-eternal-loading/releases)
 
 ### Vue2 support
-Our component is for Vue 3, if you are looking solution for Vue 2 - check this lib out [vue-infinite-loading](https://github.com//PeachScript/vue-infinite-loading).
+Our component is specifically designed for Vue 3. If you are looking for a solution for Vue 2, you can check out this library [vue-infinite-loading](https://github.com//PeachScript/vue-infinite-loading).
 
 ### Issue
-Feel free to write an issue or feature request [vue-eternal-loading issues](https://github.com/ts-pro/vue-eternal-loading/issues)
+Please feel free to create an issue or submit a feature request [vue-eternal-loading issues](https://github.com/ts-pro/vue-eternal-loading/issues)
 
 ### License
 MIT License

docs/guide/loading-states.md

@@ -1,23 +1,23 @@
 # Loading states
 
-**vue-eternal-loading** component has 4 different states which can render different templates and have influence on component's behaviour:
+The **vue-eternal-loading** component has four different states that can render different templates and influence the behavior of the component:
 
-- **loading** - it's a default state when we try to load some new content. In this state `load` prop triggers automatically when it needed. Default template: `<div class="loading">Loading...</div>`
+- **loading**: This is the default state when we are trying to load new content. In this state, the `load` prop triggers automatically when needed. Default template: `<div class="loading">Loading...</div>`
 
 
-- **no-more** - this state means than we have no more content ( server replied with empty content or content less than full page ). In this state `load` is not calling anymore. Default template: `<div class="no-more">No more.</div>`
+- **no-more**: This state indicates that we have reached the end of the available content. It occurs when the server responds with empty content or content that is less than a full page. In this state, the `load` prop is not called anymore. Default template: `<div class="no-more">No more.</div>`
 
 
-- **no-results** - this state means that we have no content at all. Maybe we have tried to load something from a server, but we got 0 items in our first request, and in this case we may want to show 'No results message'. In this state `load` is not calling anymore.  Default template: `<div class="no-results">No results.</div>`
+- **no-results**: This state means that we have no content at all. It can occur when we attempt to load content from the server, but the initial request returns zero items. In such cases, we may want to display a "No results" message. In this state, the `load` prop is not called anymore. Default template: `<div class="no-results">No results.</div>`
 
 
-- **error** - this state indicates that we got an error from the server or anywhere else. In this state `load` is not calling anymore. Default template: `<div class="error">Error.</div>`
+- **error** - This state indicates that we encountered an error from the server or any other source. In this state, the `load` prop is not called anymore. Default template: `<div class="error">Error.</div>`
 
-We can switch between states automatically, just using `loaded` callback inside `load` prop method, and we'll describe it below. Or we can set any state manually, and we will explain it in the further section.
+We can automatically switch between states by using the `loaded` callback within the `load` prop method, which will be described below. Alternatively, we can manually set any state, and we will explain this in a later section.
 
 ---
 
-In some cases we may not want to have state different from **loading**. For example, when we want to implement loading which shouldn't stop ever. It can be logs loading, realtime news loading or just trying to load something forever. To have this behaviour we have to call `loaded` callback without params:
+In some cases, we may not want to have a state other than **loading**. For example, when implementing a loading feature that should never stop, such as loading logs, real-time news, or continuously attempting to load something. To achieve this behavior, we can call the `loaded` callback without any parameters.
 
 ```js
 function load({ loaded }) {
@@ -30,7 +30,7 @@ function load({ loaded }) {
 
 ---
 
-If we use `loaded` callback with 1 param ( items count ) we can rich 2 states now: `no-more`, `no-results`. We may want to have this states to render corresponding templates. If we call `loaded(0)` on our first load - we will get **no-results** state.
+If we use the `loaded` callback with one parameter (items count), we can reach two states: **no-more** and **no-results**. We might want to have these states in order to render the corresponding templates. If we call `loaded(0)` during our first load, we will enter the **no-results** state.
 ```js
 function load({ loaded }) {
   // Load data from server
@@ -41,7 +41,7 @@ function load({ loaded }) {
 ```
 <iframe width="100%" height="300" src="//jsfiddle.net/gavrashenko/4gdht3ap/7/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 
-If we call `loaded(0)` on our second+ load - we will get **no-more** state. Which means that we have loaded content before, but we reached the end now.
+If we call `loaded(0)` during our second or subsequent load, we will enter the **no-more** state. This indicates that we have previously loaded content, but we have now reached the end and there is no more content available to load.
 ```js
 function load({ loaded }) {
   // Load data from server
@@ -52,7 +52,7 @@ function load({ loaded }) {
 ```
 <iframe width="100%" height="300" src="//jsfiddle.net/gavrashenko/uwapjzk8/7/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 
-You can admit in example above that we have 1 extra request, before we riched state `no-more`. It happens because we do not know exact page size and we can set state `no-more` only if we get empty response. It's okay if you don't know for sure what's your page size or you may have floating items count per request. But in case when you expect exact items count per page it's a good practice to pass second param to `loaded` callback, where you should specify your page size. It prevents unnecessary extra request to server and set state `no-more` when we will get items count less than page size:
+In the example mentioned above, we encountered an extra request before reaching the **no-more** state. This occurs because we don't know the exact page size, and we can only set the **no-more** state if we receive an empty response. This situation is acceptable when the page size is unknown or when the number of items per request may vary. However, if you expect a specific item count per page, it is good practice to pass a second parameter to the `loaded` callback, where you can specify your page size. This helps prevent unnecessary extra requests to the server and allows us to set the **no-more** state when we receive an items count less than the page size.
 ```js
 const PAGE_SIZE = 5;
 
@@ -66,11 +66,11 @@ function load({ loaded }) {
 
 ---
 
-We have one more state `error`, but we can't rich it automatically, just using `loaded` callback. It's because **vue-eternal-loading** have no idea about loading errors, and it can switch states based on information which you pass to `loaded` and it's not enough information to set `error` state. How to set `error` state manually we will learn further in the next sections.
+We have one more state called **error**, but it cannot be reached automatically just by using the `loaded` callback. This is because **vue-eternal-loading** is not aware of loading errors, and it switches states based on the information you pass to the `loaded` callback. The information provided is not sufficient to set the **error** state. In the upcoming sections, we will learn how to manually set the **error** state.
 
 ---
 
-If you want to know which state now is inside `load` function - `loaded()` callback returns it for you.
+If you want to know the current state inside the `load` function, the `loaded()` callback can return it for you.
 ```js
 function load({ loaded }) {
   // Load data from server

docs/guide/simple-usage.md

@@ -1,33 +1,34 @@
 # Simple usage
 
-There is a basic example of **vue-eternal-loading** usage.
+Here is a basic example of how to use **vue-eternal-loading**.
+
+When using **vue-eternal-loading**, the only required prop you need to implement is `load`. This callback method will be automatically called when it's time to load more data. `load` takes two arguments, which will be described later. For now, we only need the first one.
 
-When you work with **vue-eternal-loading** you should implement the only required prop - `load`. This callback method will be called automatically when it's time to load more data. `load` provides 2 arguments which will be described later, for now we only need the first one.
 ```html
 <VueEternalLoading :load="load"></VueEternalLoading>
 ```
 ```ts
 const PAGE_SIZE = 5;
 
-// We must pass this method to the component 
-// and it will be call automatically when needed
+// We must pass this method to the component,
+// and it will be called automatically when needed.
 async function load({ loaded }) {
-  // Load your data from server or anywhere
+  // Load your data from the server or any other source.
   const loadedItems = await loadItems(page);
   items.value.push(...loadedItems);
   page += 1;
-  // Call `loaded` callback with 2 arguments:
-  // 1. How many items we have loaded
-  // 2. Our page size to know when we riched the end
+  // Call the `loaded` callback with 2 arguments:
+  // 1. The number of items we have loaded
+  // 2. Our page size to know when we have reached the end
   loaded(loadedItems.length, PAGE_SIZE);
 }
 ```
 
-> **_NOTE:_**  You can find detailed explanation and other component possibilities in the next sections.
+> **_NOTE:_**  You can find a detailed explanation and explore other possibilities of the component in the following sections.
 
 ## Example
 
-Here you can scroll down to get more content. When you reach the end, you will see "No more.". All texts in this example is on defaults.
+Here, you can scroll down to view more content. When you reach the end, you will see the message "No more." All the texts in this example are set to their default values.
 
 <iframe width="100%" height="300" src="//jsfiddle.net/gavrashenko/pe58wszL/99/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 

docs/index.md

@@ -1,3 +1,3 @@
 # Introduction
 
-**Vue-eternal-loading** is a simple component for creating infinity scroll pagination. It is written on TypeScript for Vue 3.
+**Vue-eternal-loading** is a simple component for creating infinite scroll pagination. It is written in TypeScript for Vue 3.