Added loader + Improvements.

2022-06-03 11:56:19 +04:30 · 2022-06-03 11:56:19 +04:30 · c5104f432c
parent 1d23855eac
commit c5104f432c
17 changed files with 298 additions and 28 deletions
--- a/README.md
+++ b/README.md
@ -7,7 +7,7 @@
 ### Linux/MacOS:
 1. Make sure the MongoDB database and collection is up and running.

-2. Edit `/src/config.json` accordingly.
+2. Edit `/src/config.js` accordingly.

 3. Head to the main folder using terminal and run: `(cd api && npm install --legacy-peer-deps) && npm install --legacy-peer-deps` for the dependancies.

--- a/package-lock.json
+++ b/package-lock.json
@ -15,6 +15,7 @@
        "react": "^18.0.0",
        "react-dom": "^18.0.0",
        "react-lazyload": "^3.2.0",
+        "react-loader-spinner": "^6.0.0-0",
        "react-scripts": "5.0.0",
        "react-select": "^5.3.2",
        "web-vitals": "^2.1.4"
@ -2049,6 +2050,14 @@
      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz",
+      "integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.7.4"
+      }
+    },
    "node_modules/@emotion/memoize": {
      "version": "0.7.5",
      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
@ -2097,6 +2106,11 @@
      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
      "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
    },
+    "node_modules/@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
    "node_modules/@emotion/unitless": {
      "version": "0.7.5",
      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
@ -4820,6 +4834,26 @@
        "@babel/core": "^7.0.0-0"
      }
    },
+    "node_modules/babel-plugin-styled-components": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz",
+      "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.16.0",
+        "@babel/helper-module-imports": "^7.16.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11",
+        "picomatch": "^2.3.0"
+      },
+      "peerDependencies": {
+        "styled-components": ">= 2"
+      }
+    },
+    "node_modules/babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw=="
+    },
    "node_modules/babel-plugin-transform-react-remove-prop-types": {
      "version": "0.4.24",
      "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
@ -5131,6 +5165,11 @@
        "node": ">= 6"
      }
    },
+    "node_modules/camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg=="
+    },
    "node_modules/caniuse-api": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@ -5597,6 +5636,14 @@
        "postcss": "^8.4"
      }
    },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/css-declaration-sorter": {
      "version": "6.2.2",
      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz",
@ -5778,6 +5825,16 @@
      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
    },
+    "node_modules/css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
    "node_modules/css-tree": {
      "version": "1.0.0-alpha.37",
      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@ -13307,6 +13364,26 @@
        "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
      }
    },
+    "node_modules/react-loader-spinner": {
+      "version": "6.0.0-0",
+      "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-6.0.0-0.tgz",
+      "integrity": "sha512-ANUS2nWUNALH933d04IY3iT6aIYuizI6mQpzHjH5i4aKdnLhm68JLICd2CKdOgxCNixM5iKqA8QSNWBdKe4++g==",
+      "dependencies": {
+        "@babel/runtime": "^7.14.6",
+        "prop-types": "^15.8.1",
+        "styled-components": "^5.3.3",
+        "styled-tools": "^1.7.2",
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "npm": "please-use-yarn",
+        "yarn": ">= 1.19.1"
+      },
+      "peerDependencies": {
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@ -14084,6 +14161,11 @@
      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
    },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
    "node_modules/shebang-command": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@ -14481,6 +14563,41 @@
        "webpack": "^5.0.0"
      }
    },
+    "node_modules/styled-components": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz",
+      "integrity": "sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^1.1.0",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0",
+        "react-is": ">= 16.8.0"
+      }
+    },
+    "node_modules/styled-tools": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/styled-tools/-/styled-tools-1.7.2.tgz",
+      "integrity": "sha512-IjLxzM20RMwAsx8M1QoRlCG/Kmq8lKzCGyospjtSXt/BTIIcvgTonaxQAsKnBrsZNwhpHzO9ADx5te0h76ILVg=="
+    },
    "node_modules/stylehacks": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz",
@ -17521,6 +17638,14 @@
      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
    },
+    "@emotion/is-prop-valid": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz",
+      "integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==",
+      "requires": {
+        "@emotion/memoize": "^0.7.4"
+      }
+    },
    "@emotion/memoize": {
      "version": "0.7.5",
      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
@ -17557,6 +17682,11 @@
      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
      "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
    "@emotion/unitless": {
      "version": "0.7.5",
      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
@ -19558,6 +19688,23 @@
        "@babel/helper-define-polyfill-provider": "^0.3.1"
      }
    },
+    "babel-plugin-styled-components": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz",
+      "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.16.0",
+        "@babel/helper-module-imports": "^7.16.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11",
+        "picomatch": "^2.3.0"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw=="
+    },
    "babel-plugin-transform-react-remove-prop-types": {
      "version": "0.4.24",
      "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
@ -19801,6 +19948,11 @@
      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
    },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg=="
+    },
    "caniuse-api": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@ -20156,6 +20308,11 @@
        "postcss-selector-parser": "^6.0.9"
      }
    },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="
+    },
    "css-declaration-sorter": {
      "version": "6.2.2",
      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz",
@ -20261,6 +20418,16 @@
      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
    },
+    "css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
    "css-tree": {
      "version": "1.0.0-alpha.37",
      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@ -25543,6 +25710,18 @@
      "resolved": "https://registry.npmjs.org/react-lazyload/-/react-lazyload-3.2.0.tgz",
      "integrity": "sha512-zJlrG8QyVZz4+xkYZH5v1w3YaP5wEFaYSUWC4CT9UXfK75IfRAIEdnyIUF+dXr3kX2MOtL1lUaZmaQZqrETwgw=="
    },
+    "react-loader-spinner": {
+      "version": "6.0.0-0",
+      "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-6.0.0-0.tgz",
+      "integrity": "sha512-ANUS2nWUNALH933d04IY3iT6aIYuizI6mQpzHjH5i4aKdnLhm68JLICd2CKdOgxCNixM5iKqA8QSNWBdKe4++g==",
+      "requires": {
+        "@babel/runtime": "^7.14.6",
+        "prop-types": "^15.8.1",
+        "styled-components": "^5.3.3",
+        "styled-tools": "^1.7.2",
+        "tslib": "^2.3.0"
+      }
+    },
    "react-refresh": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@ -26114,6 +26293,11 @@
      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
    },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
    "shebang-command": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@ -26412,6 +26596,28 @@
      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ=="
    },
+    "styled-components": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz",
+      "integrity": "sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^1.1.0",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      }
+    },
+    "styled-tools": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/styled-tools/-/styled-tools-1.7.2.tgz",
+      "integrity": "sha512-IjLxzM20RMwAsx8M1QoRlCG/Kmq8lKzCGyospjtSXt/BTIIcvgTonaxQAsKnBrsZNwhpHzO9ADx5te0h76ILVg=="
+    },
    "stylehacks": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz",
--- a/package.json
+++ b/package.json
@ -11,6 +11,7 @@
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-lazyload": "^3.2.0",
+    "react-loader-spinner": "^6.0.0-0",
    "react-scripts": "5.0.0",
    "react-select": "^5.3.2",
    "web-vitals": "^2.1.4"
--- a/src/App.js
+++ b/src/App.js
@ -8,6 +8,8 @@ import Sort from './componets/Sort';
 import sortList from './modules/sortList';
 import filter from './modules/filterData';
 import concatTags from './modules/concatTags';
+import NoResults from './componets/NoResults';
+import Loader from './componets/Loader';

 function App() {
  const [data, setData] = useState([]),
@ -19,7 +21,12 @@ function App() {
    [nameChecked, setNameChecked] = useState(true),
    [descriptionChecked, setDescriptionChecked] = useState(true),
    [tagsChecked, setTagsChecked] = useState(true),
-    [sortBy, setSortBy] = useState('Default');
+    [sortBy, setSortBy] = useState('Default'),
+    [loader, setLoader] = useState(false);
+
+  function SetLoader(x) {
+    setLoader(x)
+  }

  function handleNameCheckbox() {
    setNameChecked(!nameChecked);
@ -66,6 +73,7 @@ function App() {

  useEffect(() => {
    fetchData();
+    // eslint-disable-next-line
  }, [sortBy]);

  useEffect(() => {
@ -79,12 +87,14 @@ function App() {
        <button className="btn" onClick={() => setNewBox(true)}>&#xf067;</button>
      </div>

-      <p className="results">{numberOfResults > 0 ? numberOfResults + ' Bookmarks found' : 'No bookmarks found.'}</p>
+      <p className="results">{numberOfResults > 0 ? numberOfResults + ' Bookmarks found' : null}</p>

      <button className='btn' onClick={() => setFilterBox(true)}>&#xf0b0;</button>
      <button className='btn' onClick={() => setSortBox(true)}>&#xf0dc;</button>
      <List data={filteredData} reFetch={fetchData} />

+      {numberOfResults === 0 ? <NoResults /> : null}
+
      {sortBox ? <Sort 
        sortBy={sortByFunc}
        onExit={exitSorting}
@ -101,10 +111,13 @@ function App() {
       /> : null}

      {newBox ? <AddItem 
+        SetLoader={SetLoader}
        onExit={exitAdding} 
        reFetch={fetchData} 
        tags={() => concatTags(data)} 
      /> : null}
+
+      {loader ? <Loader /> : null}
    </div>
  );
 }
--- a/src/componets/AddItem.js
+++ b/src/componets/AddItem.js
@ -3,11 +3,16 @@ import '../styles/AddItem.css';
 import TagSelection from './TagSelection';
 import addItem from '../modules/addItem';

-const AddItem = ({onExit, reFetch, tags}) => {
+const AddItem = ({onExit, reFetch, tags, SetLoader}) => {
  const [name, setName] = useState('');
  const [link, setLink] = useState('');
  const [tag, setTag] = useState([]);

+  function newItem() {
+    SetLoader(true)
+    addItem(name, link, tag, reFetch, onExit, SetLoader);
+  }
+
  function SetName(e) {
    setName(e.target.value);
  }
@ -39,7 +44,7 @@ const AddItem = ({onExit, reFetch, tags}) => {
          <input onChange={SetLink} className="AddItem-input" type="search" placeholder="e.g. https://example.com/"/>
          <h3>Tags:</h3>
          <TagSelection setTags={SetTags} tags={tags} />
-          <button onClick={() => addItem(name, link, tag, reFetch, onExit)} className="upload-btn">Upload &#xf093;</button>
+          <button onClick={newItem} className="upload-btn">Upload &#xf093;</button>
        </div>
      </fieldset>
    </>
--- a/src/componets/List.js
+++ b/src/componets/List.js
@ -6,22 +6,23 @@ import deleteEntity from '../modules/deleteEntity';
 const List = ({data, reFetch}) => {
  return (
    <div className="list">
+        {/* eslint-disable-next-line */}
        {data.map((e, i) => {
            try {
                const url = new URL(e.link);
                const favicon = 'http://www.google.com/s2/favicons?domain=' + url.hostname;
-                return <LazyLoad key={i} height={200} offset={200}>
+                return (<LazyLoad key={i} height={200} offset={200}>
                    <div className="list-row">
                        <div className="img-content-grp">
-                            <img src={favicon} />
+                            <img alt='' src={favicon} />
                            <div className="list-entity-content">
                                <div className='row-name'>
-                                    <span className="num">{i + 1}.</span> {e.name} <a target="_blank" href={e.link}>({url.hostname})</a>
+                                    <span className="num">{i + 1}.</span> {e.name} <a target="_blank" rel="noreferrer" href={e.link}>({url.hostname})</a>
                                </div>
                                <div>{e.title}</div>
                                <div className="tags">
                                    {e.tag.map((e, i) => {
-                                        return <div key={i}>{e}</div>
+                                        return (<div key={i}>{e}</div>)
                                    })}
                                </div>
                            </div>
@ -31,7 +32,7 @@ const List = ({data, reFetch}) => {
                            <div className="delete" onClick={() => deleteEntity(e._id, reFetch)}>&#xf2ed;</div>
                        </div>
                    </div>
-                </LazyLoad>
+                </LazyLoad>)
            } catch (e) {
                console.log(e);
            }
--- a/src/componets/Loader.js
+++ b/src/componets/Loader.js
@ -0,0 +1,13 @@
+import '../styles/Loader.css';
+import { InfinitySpin } from  'react-loader-spinner'
+
+
+const Loader = () => {
+  return (
+    <div className='loader'>
+      <InfinitySpin color="white" />
+    </div>
+  )
+}
+
+export default Loader
--- a/src/componets/NoResults.js
+++ b/src/componets/NoResults.js
@ -0,0 +1,12 @@
+import React from 'react'
+
+const NoResults = () => {
+  return (
+    <div className='no-results'>
+        <h1>¯\_(ツ)_/¯</h1>
+        <p>Nothing found.</p>
+    </div>
+  )
+}
+
+export default NoResults;
--- a/src/componets/TagSelection.js
+++ b/src/componets/TagSelection.js
@ -1,4 +1,3 @@
-import { useState } from "react";
 import CreatableSelect from "react-select/creatable";

 const customStyles = {
@ -7,6 +6,11 @@ const customStyles = {
    color: '#a9a9a9',
  }),

+  multiValueRemove: (provided) => ({
+    ...provided,
+    color: 'gray',
+  }),
+
  indicatorSeparator: (provided) => ({
    ...provided,
    display: 'none',
@ -17,7 +21,7 @@ const customStyles = {
    border: 'solid',
    borderWidth: '1px',
    borderRadius: '0px',
-    borderColor: 'rgb(80, 80, 80)',
+    borderColor: 'rgb(141, 141, 141)',
    opacity: '90%',
    color: 'gray',
    background: '#273949',
--- a/src/componets/ViewArchived.js
+++ b/src/componets/ViewArchived.js
@ -7,9 +7,9 @@ const ViewArchived = ({ id }) => {

  return (
    <div className='view-archived'>
-        <a href={screenshotPath} target='_blank'>Screenshot</a>
+        <a href={screenshotPath} target='_blank' rel="noreferrer">Screenshot</a>
        <hr className='seperator' />
-        <a href={pdfPath} target='_blank'>PDF</a>
+        <a href={pdfPath} target='_blank' rel="noreferrer">PDF</a>
    </div>
  )
 }
--- a/src/modules/addItem.js
+++ b/src/modules/addItem.js
@ -1,7 +1,7 @@
 import config from '../config';
 import { nanoid } from 'nanoid';

-const addItem = async (name, link, tag, reFetch, onExit) => {
+const addItem = async (name, link, tag, reFetch, onExit, SetLoader) => {
    function isValidHttpUrl(string) {
      let url;
      
@ -30,7 +30,7 @@ const addItem = async (name, link, tag, reFetch, onExit) => {
        }
      })
      .then(res => res.text())
-      .then(message => {console.log(message)})
+      .then(message => {SetLoader(false)})
      .then(() => reFetch());

      onExit();
--- a/src/styles/AddItem.css
+++ b/src/styles/AddItem.css
@ -17,11 +17,10 @@
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    position: absolute;
    z-index: 2;
-    top: 63px;
-    right: 20px;
+    top: 15%;
+    left: 20%;
+    right: 20%;
    background-color: #1f2c38;
-    width: 50%;
-    max-width: 500px;
    overflow-x: hidden;
    overflow-y: auto;
 }
--- a/src/styles/App.css
+++ b/src/styles/App.css
@ -59,3 +59,12 @@ textarea:focus, input:focus{
  margin: 20px 20px 0px 30px;
  display: inline-block;
 }
+
+.no-results {
+  text-align: center;
+  padding-top: 5%;
+  padding-bottom: 5%;
+  background-color:#273949;
+  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+  margin: 20px;
+}
--- a/src/styles/Filters.css
+++ b/src/styles/Filters.css
@ -20,10 +20,10 @@
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    background-color: #273949;
    padding: 5px;
-    top: 120px;
-    left: 195px;
+    top: 15%;
+    left: 30%;
+    right: 30%;
    position: absolute;
-    margin-top: 4px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
--- a/src/styles/Loader.css
+++ b/src/styles/Loader.css
@ -0,0 +1,7 @@
+.loader {
+    position: absolute;
+    bottom: 100px;
+    left: 30%;
+    right: 30%;
+    text-align: center;
+}
--- a/src/styles/Sort.css
+++ b/src/styles/Sort.css
@ -20,10 +20,10 @@
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    background-color: #273949;
    padding: 5px;
-    top: 120px;
-    left: 250px;
+    top: 15%;
+    left: 25%;
+    right: 25%;
    position: absolute;
-    margin-top: 4px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
--- a/src/styles/index.css
+++ b/src/styles/index.css
@ -9,5 +9,5 @@ body {
 }

 *::selection {
-  background-color: rgba(101, 142, 255, 0.335);
+  background-color: rgba(255, 255, 0, 0.25);
 }