From edb740152053dba34562655d7c354996c2ce3681 Mon Sep 17 00:00:00 2001
From: Uriy Korotovskikh <ukorotovskiy@gmail.com>
Date: Tue, 15 Aug 2023 23:00:51 +0400
Subject: [PATCH] add loader #28

---
 app/loading.tsx              |  9 +++-
 components/Loader/Loader.tsx | 80 +++++++++++++++++++-----------------
 package-lock.json            | 16 ++++++++
 package.json                 |  1 +
 4 files changed, 68 insertions(+), 38 deletions(-)

diff --git a/app/loading.tsx b/app/loading.tsx
index ee9b3f8..d050227 100644
--- a/app/loading.tsx
+++ b/app/loading.tsx
@@ -1,8 +1,15 @@
+import clsx from 'clsx';
 import Loader from '@/components/Loader/Loader';
 
+const containerCn = clsx('grow', 'flex', 'justify-center', 'items-center', 'h-full', 'w-full');
+
 /**
  * @returns React component.
  */
 export default function Loading() {
-  return <Loader />;
+  return (
+    <div className={containerCn}>
+      <Loader />
+    </div>
+  );
 }
diff --git a/components/Loader/Loader.tsx b/components/Loader/Loader.tsx
index 06affac..5e90f16 100644
--- a/components/Loader/Loader.tsx
+++ b/components/Loader/Loader.tsx
@@ -1,8 +1,9 @@
-/**
- * @file In order to render loader on the server we don't use framer motion here.
- */
+'use client';
 
+import {OnScreen} from '@ukorvl/react-on-screen';
 import clsx from 'clsx';
+import {ComponentProps} from 'react';
+import PuffLoader from 'react-spinners/PuffLoader';
 
 /**
  * Loader size.
@@ -15,48 +16,53 @@ type LoaderSize = 'sm' | 'lg' | 'md';
 type LoaderProps = {
   /** @default md */
   size?: LoaderSize;
-  /** @default false */
-  grow?: boolean;
+  /** @default white */
+  color?: ComponentProps<typeof PuffLoader>['color'];
 };
 
+const containerBaseCn = clsx(
+  'flex justify-content-center align-items-center p-4',
+  'transition-opacity',
+  'duration-300',
+);
+// eslint-disable-next-line jsdoc/require-jsdoc
+const containerCn = (isOnScreen: boolean) =>
+  clsx(containerBaseCn, isOnScreen ? 'opacity-100' : 'opacity-0');
+
 /**
  * @param {LoaderProps} props Props.
  * @returns React component.
  */
-export default function Loader({size = 'md', grow = false}: LoaderProps) {
-  const containerClassName = clsx(
-    'absolute flex justify-content-center align-items-center p-4',
-    grow && 'min-h-screen w-full',
-  );
-
-  const bouncingElementClassName = clsx('motion-safe:animate-bounce h-5 w-5 m-2 bg-white', size);
-
-  //const bouncingElementViewBox = '0 0 24 24';
-
+export default function Loader({size = 'md', color = 'white'}: LoaderProps) {
   return (
-    <div
-      className={containerClassName}
-      role="status"
-    >
-      {[...new Array(3).keys()].map(x => (
+    <OnScreen<HTMLDivElement>>
+      {({ref, isOnScreen}) => (
         <div
-          key={x}
-          className={bouncingElementClassName}
-        />
-      ))}
-    </div>
+          className={containerCn(isOnScreen)}
+          ref={ref}
+        >
+          <PuffLoader
+            size={mapSizeToValue(size)}
+            color={color}
+            aria-label="Loading"
+            role="status"
+          />
+        </div>
+      )}
+    </OnScreen>
   );
 }
 
-// function mapSizeToRem(s: LoaderSize) {
-//   switch (s) {
-//     case 'md':
-//       return 1;
-//     case 'lg':
-//       return 2;
-//     case 'sm':
-//       return 0.75;
-//     default:
-//       return 1;
-//   }
-// }
+// eslint-disable-next-line jsdoc/require-jsdoc
+function mapSizeToValue(s: LoaderSize) {
+  switch (s) {
+    case 'md':
+      return 150;
+    case 'lg':
+      return 200;
+    case 'sm':
+      return 100;
+    default:
+      return 150;
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index b4fe4e4..7c7f06e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
         "react-hotkeys-hook": "^4.4.0",
         "react-page-visibility": "^7.0.0",
         "react-photoswipe-gallery": "^2.2.7",
+        "react-spinners": "^0.13.8",
         "tailwind-merge": "^1.13.1",
         "tailwindcss": "3.3.2",
         "typescript": "5.0.4"
@@ -5996,6 +5997,15 @@
         "react": ">= 16.8.0"
       }
     },
+    "node_modules/react-spinners": {
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
+      "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -11679,6 +11689,12 @@
       "integrity": "sha512-AEYNoL4/IIRosIUonn4haaFQNn1ui4vdVgAY9LHd/imVamNCkqUcyWeT6317UILp/yJI2gohsd3lWmcJEbjCag==",
       "requires": {}
     },
+    "react-spinners": {
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
+      "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
+      "requires": {}
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 4d3c374..33f19da 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "react-hotkeys-hook": "^4.4.0",
     "react-page-visibility": "^7.0.0",
     "react-photoswipe-gallery": "^2.2.7",
+    "react-spinners": "^0.13.8",
     "tailwind-merge": "^1.13.1",
     "tailwindcss": "3.3.2",
     "typescript": "5.0.4"