Moved components and fixed loading spinner

env-config/example.env

@@ -1,5 +1,19 @@
 SENTRY_ORG=
 
+NEXT_PUBLIC_DSN=
+NEXT_PUBLIC_ENVIRONMENT=
+NEXT_RELEASE_PACKAGE_NAME=
+NEXT_SENTRY_PROJECT=
+NEXT_SOURCEMAPS_DIR=
+NEXT_SOURCEMAPS_URL_PREFIX=
+NEXT_PUBLIC_FLASK_BACKEND=
+NEXT_PUBLIC_EXPRESS_BACKEND=
+NEXT_PUBLIC_SPRINGBOOT_BACKEND=
+NEXT_PUBLIC_ASPNETCORE_BACKEND=
+NEXT_PUBLIC_LARAVEL_BACKEND=
+NEXT_PUBLIC_RUBY_BACKEND=
+NEXT_PUBLIC_RUBYONRAILS_BACKEND=
+
 REACT_APP_DSN=
 REACT_APP_ENGINE_SERVICE=
 REACT_APP_ENVIRONMENT=

next/package.json

@@ -16,7 +16,7 @@
     "prisma": "^5.21.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-loader-spinner": "~4.0.0",
+    "react-loader-spinner": "~6.1.6",
     "react-redux": "~7.2.4",
     "react-router-dom": "~6.3.0",
     "react-scripts": "~5.0.1",

next/src/app/layout.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import { Suspense } from 'react';
 
-import SentryQueryInitializer from '/src/ui/SentryQueryInitializer';
-import HomeContent from '/src/ui/HomeContent';
+import SentryQueryInitializer from '/src/components/SentryQueryInitializer';
+import HomeContent from '/src/components/HomeContent';
 
 export default function RootLayout({
   // Layouts must accept a children prop.

next/src/app/page.jsx

@@ -18,9 +18,8 @@ const divStyle = {
 
 
 export default function Page() {
-  console.log("in home page");
   const router = useRouter();
-  const { backend, frontendSlowdown } = useSearchParams();
+  const { backend } = useSearchParams();
   const backendType = determineBackendType(backend);
   const backendUrl = determineBackendUrl(backendType);
   console.log('backend is ' + backendUrl);

next/src/app/products-sc/page.jsx

@@ -1,12 +1,13 @@
-import ThreeDotLoader from '/src/ui/ThreeDotLoader';
-import ProductCatalog from '/src/ui/ProductCatalog';
+import ThreeDotLoader from '/src/components/ThreeDotLoader';
+import ProductCatalog from '/src/components/ProductCatalog';
 import { Suspense } from 'react';
 
 export const dynamic = 'force-dynamic';
 export const fetchCache = 'force-no-store';
 
 
 export default function Products() {
+  // ToDo: figure out why three dot animation is frozen when rendering ThreeDotLoader or replace it
   return (
     <Suspense fallback={<ThreeDotLoader />}>
       <ProductCatalog />

next/src/app/products/page.jsx

@@ -4,7 +4,7 @@ import * as Sentry from '@sentry/nextjs';
 import { connect } from 'react-redux';
 import { setProducts, addProduct } from '/src/actions';
 import measureRequestDuration from '/src/utils/measureRequestDuration';
-import ThreeDotLoader from '/src/ui/ThreeDotLoader'
+import ThreeDotLoader from '/src/components/ThreeDotLoader'
 import ProductCard from '/src/components/ProductCard';
 import { useState, useEffect } from 'react';
 import { useSearchParams } from 'next/navigation';
@@ -144,7 +144,7 @@ function Products() {
 
     getProducts(frontendSlowdown);
   }, []);
-  return products.length > 0 ? (
+  return false ? (
     <div>
       <ul className="products-list">
         {products.map((product, i) => {

next/src/ui/HomeContent.jsx → next/src/components/HomeContent.jsx

@@ -21,6 +21,7 @@ import '/src/styles/complete.css';
 import '/src/styles/product.css';
 
 
+
 const sentryReduxEnhancer = Sentry.createReduxEnhancer({});
 
 const store = createStore(

next/src/ui/ThreeDotLoader.jsx → next/src/components/ThreeDotLoader.jsx

@@ -1,11 +1,13 @@
 'use client'
 
-import Loader from 'react-loader-spinner';
+import { ThreeDots } from 'react-loader-spinner';
+
 
 export default function ThreeDotLoader() {
+
   return (
     <div className="loader-container">
-      <Loader type="ThreeDots" color="#f6cfb2" height={150} width={150} />
+      <ThreeDots color="#f6cfb2" height={150} width={150} />
     </div>
   );
-}
+}

next/src/styles/products.css

@@ -36,4 +36,6 @@
 
 .loader-container {
   text-align: center;
+  display: flex;
+  justify-content: center;
 }