update directories

package.json

@@ -19,6 +19,7 @@
     "ext-name": "^5.0.0",
     "postcss": "^8.4.21",
     "react": "^18.2.0",
+    "react-content-loader": "^6.2.1",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-helmet-async": "^1.3.0",

src/App.js

@@ -2,11 +2,11 @@ import React, { useEffect } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
 import useBoardStore from './useBoardStore';
-import Home from './components/Home';
+import Home from './components/views/Home';
-import Board from './components/Board';
+import Board from './components/views/Board';
-import Thread from './components/Thread';
+import Thread from './components/views/Thread';
-import Catalog from './components/Catalog';
+import Catalog from './components/views/Catalog';
-import NotFound from './components/NotFound';
+import NotFound from './components/views/NotFound';
 import styled, { createGlobalStyle } from 'styled-components';
 import 'react-tooltip/dist/react-tooltip.css';
 import 'react-toastify/dist/ReactToastify.css';

src/components/views/Board.jsx

@@ -1,18 +1,18 @@
 import React, { useState, useEffect, Fragment } from 'react';
 import { Link, useNavigate, useParams, useLocation } from 'react-router-dom';
-import useBoardStore from '../useBoardStore';
+import useBoardStore from '../../useBoardStore';
 import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled';
-import ImageBanner from './ImageBanner';
+import ImageBanner from '../ImageBanner';
-import CaptchaModal from './CaptchaModal';
+import CaptchaModal from '../CaptchaModal';
-import ReplyModal from './ReplyModal';
+import ReplyModal from '../ReplyModal';
-import SettingsModal from './SettingsModal';
+import SettingsModal from '../SettingsModal';
 import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
 import InfiniteScroll from 'react-infinite-scroller';
 import { Tooltip } from 'react-tooltip';
-import onError from '../utils/onError';
+import onError from '../../utils/onError';
-import onSuccess from '../utils/onSuccess';
+import onSuccess from '../../utils/onSuccess';
-import getDate from '../utils/getDate';
+import getDate from '../../utils/getDate';
-import renderComments from '../utils/renderComments';
+import renderComments from '../../utils/renderComments';
 
 
 const Board = ({ setBodyStyle }) => {

src/components/views/Catalog.jsx

@@ -1,15 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import { Link, useNavigate, useParams, useLocation } from 'react-router-dom';
-import useBoardStore from '../useBoardStore';
+import useBoardStore from '../../useBoardStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from './styles/Board.styled';
 import { TopBar } from './styles/Thread.styled';
 import { Threads } from './styles/Catalog.styled';
 import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
-import ImageBanner from './ImageBanner';
+import ImageBanner from '../ImageBanner';
-import CaptchaModal from './CaptchaModal';
+import CaptchaModal from '../CaptchaModal';
-import SettingsModal from './SettingsModal';
+import SettingsModal from '../SettingsModal';
-import onError from '../utils/onError';
+import onError from '../../utils/onError';
-import onSuccess from '../utils/onSuccess';
+import onSuccess from '../../utils/onSuccess';
 import InfiniteScroll from 'react-infinite-scroller';
 
 

src/components/views/Home.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import useBoardStore from '../useBoardStore';
+import useBoardStore from '../../useBoardStore';
 import { Link } from 'react-router-dom';
 import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from './styles/Home.styled';
 

src/components/views/NotFound.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect }  from 'react';
-import useBoardStore from '../useBoardStore';
+import useBoardStore from '../../useBoardStore';
 import { Link } from "react-router-dom";
 import { Container, Header, Logo, Page, Boards, BoardsTitle } from './styles/Home.styled';
 

src/components/views/Thread.jsx

@@ -1,18 +1,18 @@
 import React, { useState, useEffect } from 'react';
 import { Link, useNavigate, useParams, useLocation } from 'react-router-dom';
-import useBoardStore from '../useBoardStore';
+import useBoardStore from '../../useBoardStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormTable, BoardForm } from './styles/Board.styled';
 import { ReplyFormLink, TopBar, BottomBar } from './styles/Thread.styled';
 import { useComment, useAccountsActions } from '@plebbit/plebbit-react-hooks';
-import ImageBanner from './ImageBanner';
+import ImageBanner from '../ImageBanner';
-import CaptchaModal from './CaptchaModal';
+import CaptchaModal from '../CaptchaModal';
-import ReplyModal from './ReplyModal';
+import ReplyModal from '../ReplyModal';
-import SettingsModal from './SettingsModal';
+import SettingsModal from '../SettingsModal';
 import { Tooltip } from 'react-tooltip';
-import onError from '../utils/onError';
+import onError from '../../utils/onError';
-import onSuccess from '../utils/onSuccess';
+import onSuccess from '../../utils/onSuccess';
-import getDate from '../utils/getDate';
+import getDate from '../../utils/getDate';
-import renderThreadComments from '../utils/renderThreadComments';
+import renderThreadComments from '../../utils/renderThreadComments';
 
 
 const Thread = ({ setBodyStyle }) => {

yarn.lock

@@ -9970,6 +9970,11 @@ react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     whatwg-fetch "^3.6.2"
 
+react-content-loader@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-6.2.1.tgz#8feb733c2d2495002e1b216f13707f2b5f2a8ead"
+  integrity sha512-6ONbFX+Hi3SHuP66JB8CPvJn372pj+qwltJV0J8z/8MFrq98I1cbFdZuhDWeQXu3CFxiiDTXJn7DFxx2ZvrO7g==
+
 react-dev-utils@^12.0.1:
   version "12.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"