add loader to examples

Author: KurtGokhan

examples/vite/src/App.tsx

@@ -151,8 +151,9 @@ function AppCore() {
       )}
 
       {articles.hasNextPage && (
-        <button onClick={() => articles.fetchNextPage()} disabled={articles.isFetchingNextPage} className="btn btn-primary mt-4">
+        <button onClick={() => articles.fetchNextPage()} disabled={articles.isFetching} className="btn btn-primary m-4">
           Load next page
+          {articles.isFetching && <span className="loader" />}
         </button>
       )}
     </>

examples/vite/src/index.css

@@ -3,7 +3,11 @@
 @tailwind utilities;
 
 .btn {
-  @apply px-4 py-2 rounded;
+  @apply px-4 py-2 rounded inline-flex flex-row gap-1;
+
+  &[disabled] {
+    @apply bg-gray-300 text-gray-500 hover:bg-gray-300 cursor-not-allowed;
+  }
 }
 
 .btn-primary {
@@ -17,3 +21,8 @@
 .btn-danger {
   @apply bg-red-500 text-white hover:bg-red-700;
 }
+
+.loader {
+  @apply inline-block w-5 h-5 border-[3px] border-transparent border-t-gray-200 rounded-full animate-spin align-middle;
+  animation-duration: 400ms;
+}