Optimize App Performance and Speed

config-overrides.js

@@ -29,5 +29,10 @@ module.exports = function override(config) {
     warnings: false
   };
 
+  // Add crossorigin attribute to script tags to fix CORS/ORB issues
+  if (config.output) {
+    config.output.crossOriginLoading = 'anonymous';
+  }
+
   return config;
 }

netlify.toml

@@ -0,0 +1,75 @@
+# Netlify configuration file
+
+[build]
+  # Build command
+  command = "npm run build:prod"
+  # Output directory
+  publish = "build"
+  # Node version
+  NODE_VERSION = "16.20.2"
+
+[build.environment]
+  # Disable source maps in production for faster builds
+  GENERATE_SOURCEMAP = "false"
+
+# Redirects and rewrites
+[[redirects]]
+  # SPA fallback - redirect all routes to index.html
+  from = "/*"
+  to = "/index.html"
+  status = 200
+  force = false
+
+# Plugin configuration
+[[plugins]]
+  package = "@netlify/plugin-lighthouse"
+
+# Deploy context-specific settings
+[context.production]
+  command = "npm run build:prod"
+  [context.production.environment]
+    CI = "true"
+
+[context.deploy-preview]
+  command = "npm run build:dev"
+  [context.deploy-preview.environment]
+    CI = ""
+
+[context.branch-deploy]
+  command = "npm run build:dev"
+  [context.branch-deploy.environment]
+    CI = ""
+
+# Headers configuration (also defined in public/_headers for redundancy)
+[[headers]]
+  for = "/*"
+  [headers.values]
+    Access-Control-Allow-Origin = "*"
+    Cross-Origin-Resource-Policy = "cross-origin"
+    X-Frame-Options = "SAMEORIGIN"
+    X-Content-Type-Options = "nosniff"
+    X-XSS-Protection = "1; mode=block"
+    Referrer-Policy = "strict-origin-when-cross-origin"
+
+[[headers]]
+  for = "/static/js/*"
+  [headers.values]
+    Content-Type = "application/javascript"
+    Access-Control-Allow-Origin = "*"
+    Cross-Origin-Resource-Policy = "cross-origin"
+    Cache-Control = "public, max-age=31536000, immutable"
+
+[[headers]]
+  for = "/static/css/*"
+  [headers.values]
+    Content-Type = "text/css"
+    Access-Control-Allow-Origin = "*"
+    Cross-Origin-Resource-Policy = "cross-origin"
+    Cache-Control = "public, max-age=31536000, immutable"
+
+[[headers]]
+  for = "/*.js"
+  [headers.values]
+    Content-Type = "application/javascript"
+    Access-Control-Allow-Origin = "*"
+    Cross-Origin-Resource-Policy = "cross-origin"

public/_headers

@@ -0,0 +1,104 @@
+# Headers for all files
+/*
+  # Allow cross-origin requests for all resources
+  Access-Control-Allow-Origin: *
+  Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
+  Access-Control-Allow-Headers: Content-Type, Authorization
+
+  # Fix ORB (Opaque Response Blocking) errors - CRITICAL
+  Cross-Origin-Resource-Policy: cross-origin
+
+  # Allow embedding from any origin
+  X-Frame-Options: SAMEORIGIN
+
+  # Security headers - permissive for development
+  Referrer-Policy: strict-origin-when-cross-origin
+
+  # Timing headers
+  Timing-Allow-Origin: *
+
+# JavaScript and CSS files - critical for fixing ORB blocking
+/static/js/*
+  Content-Type: application/javascript
+  Access-Control-Allow-Origin: *
+  Cross-Origin-Resource-Policy: cross-origin
+  Cache-Control: public, max-age=31536000, immutable
+
+/static/css/*
+  Content-Type: text/css
+  Access-Control-Allow-Origin: *
+  Cross-Origin-Resource-Policy: cross-origin
+  Cache-Control: public, max-age=31536000, immutable
+
+# Service Worker
+/service-worker.js
+  Content-Type: application/javascript
+  Access-Control-Allow-Origin: *
+  Cross-Origin-Resource-Policy: cross-origin
+  Cache-Control: no-cache, no-store, must-revalidate
+
+# Media files
+/static/media/*
+  Access-Control-Allow-Origin: *
+  Cross-Origin-Resource-Policy: cross-origin
+  Cache-Control: public, max-age=31536000, immutable
+
+# Images
+/*.jpg
+  Access-Control-Allow-Origin: *
+  Cross-Origin-Resource-Policy: cross-origin
+  Cache-Control: public, max-age=31536000, immutable
+
+/*.png
+  Access-Control-Allow-Origin: *
+  Cross-Origin-Resource-Policy: cross-origin
+  Cache-Control: public, max-age=31536000, immutable
+
+/*.svg
+  Access-Control-Allow-Origin: *
+  Cross-Origin-Resource-Policy: cross-origin
+  Cache-Control: public, max-age=31536000, immutable
+
+/*.webp
+  Access-Control-Allow-Origin: *
+  Cross-Origin-Resource-Policy: cross-origin
+  Cache-Control: public, max-age=31536000, immutable
+
+# Fonts
+/fonts/*
+  Access-Control-Allow-Origin: *
+  Cross-Origin-Resource-Policy: cross-origin
+  Cache-Control: public, max-age=31536000, immutable
+
+/*.woff
+  Access-Control-Allow-Origin: *
+  Cross-Origin-Resource-Policy: cross-origin
+  Cache-Control: public, max-age=31536000, immutable
+
+/*.woff2
+  Access-Control-Allow-Origin: *
+  Cross-Origin-Resource-Policy: cross-origin
+  Cache-Control: public, max-age=31536000, immutable
+
+/*.ttf
+  Access-Control-Allow-Origin: *
+  Cross-Origin-Resource-Policy: cross-origin
+  Cache-Control: public, max-age=31536000, immutable
+
+/*.eot
+  Access-Control-Allow-Origin: *
+  Cross-Origin-Resource-Policy: cross-origin
+  Cache-Control: public, max-age=31536000, immutable
+
+# HTML files - no caching
+/*.html
+  Cache-Control: no-cache, no-store, must-revalidate
+  Pragma: no-cache
+  Expires: 0
+
+# Manifest and other JSON files
+/*.json
+  Content-Type: application/json
+  Access-Control-Allow-Origin: *
+  Cross-Origin-Resource-Policy: cross-origin
+  Cache-Control: public, max-age=86400

public/test-cors.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CORS/ORB Header Test</title>
+  <style>
+    body {
+      font-family: monospace;
+      padding: 20px;
+      background: #1a1a1a;
+      color: #00ff00;
+    }
+    .success { color: #00ff00; }
+    .error { color: #ff0000; }
+    .info { color: #ffaa00; }
+    pre {
+      background: #000;
+      padding: 10px;
+      border: 1px solid #333;
+      overflow-x: auto;
+    }
+  </style>
+</head>
+<body>
+  <h1>🔍 CORS/ORB Header Test Page</h1>
+  <p>This page tests if headers are correctly set on your Netlify deploy.</p>
+
+  <h2>Test Results:</h2>
+  <div id="results"></div>
+
+  <h2>Instructions:</h2>
+  <ol>
+    <li>Open browser DevTools (F12)</li>
+    <li>Go to Network tab</li>
+    <li>Reload this page</li>
+    <li>Click on any .js file in the list</li>
+    <li>Check "Response Headers" section</li>
+  </ol>
+
+  <h3>Required Headers (should see these):</h3>
+  <pre>
+access-control-allow-origin: *
+cross-origin-resource-policy: cross-origin
+content-type: application/javascript
+  </pre>
+
+  <script>
+    const results = document.getElementById('results');
+
+    async function testHeaders() {
+      results.innerHTML += '<p class="info">⏳ Testing headers...</p>';
+
+      try {
+        // Test fetching this page
+        const response = await fetch(window.location.href);
+        const headers = {};
+
+        for (let [key, value] of response.headers.entries()) {
+          headers[key] = value;
+        }
+
+        results.innerHTML += '<h3>Headers on this page:</h3>';
+        results.innerHTML += '<pre>' + JSON.stringify(headers, null, 2) + '</pre>';
+
+        // Check for required headers
+        const hasACAO = headers['access-control-allow-origin'] === '*';
+        const hasCORP = headers['cross-origin-resource-policy'] === 'cross-origin';
+
+        if (hasACAO && hasCORP) {
+          results.innerHTML += '<p class="success">✅ CORS headers are correctly set!</p>';
+        } else {
+          results.innerHTML += '<p class="error">❌ Missing required headers:</p>';
+          if (!hasACAO) results.innerHTML += '<p class="error">  - access-control-allow-origin</p>';
+          if (!hasCORP) results.innerHTML += '<p class="error">  - cross-origin-resource-policy</p>';
+        }
+
+      } catch (error) {
+        results.innerHTML += '<p class="error">❌ Error testing headers: ' + error.message + '</p>';
+      }
+
+      // Show current URL
+      results.innerHTML += '<h3>Current URL:</h3>';
+      results.innerHTML += '<pre>' + window.location.href + '</pre>';
+
+      // Show user agent
+      results.innerHTML += '<h3>User Agent:</h3>';
+      results.innerHTML += '<pre>' + navigator.userAgent + '</pre>';
+    }
+
+    testHeaders();
+  </script>
+</body>
+</html>

src/components/common/BuzzPhotoGrid/index.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useMemo } from 'react'
+import React, { useRef, useMemo } from 'react'
 import { isMobile } from 'react-device-detect'
 import { createUseStyles } from 'react-jss'
 import { bindActionCreators } from 'redux'

src/components/common/BuzzRenderer/index.jsx

@@ -53,7 +53,7 @@ const createReactElement = (node, skipTags) => {
   return null
 }
 
-const BuzzRenderer = ({ content, skipTags = [], className }) => {
+const BuzzRenderer = React.memo(({ content, skipTags = [], className }) => {
   const classes = useStyles()
   const sanitizedContent = sanitizeHtml(content, {
     allowedTags: sanitizeHtml.defaults.allowedTags.concat(['span']),
@@ -71,6 +71,6 @@ const BuzzRenderer = ({ content, skipTags = [], className }) => {
     .filter(el => el)
 
   return <span className={classNames(className, classes.rendererWrapper)}>{elements}</span>
-}
+})
 
 export default BuzzRenderer

src/components/common/Renderer/index.js

@@ -296,7 +296,6 @@ const prepareTwitterEmbeds = (
               match = link.match(/(?:https?:\/\/(?:(?:x\.com\/(.*?)\/status\/(.*)?=(.*))))/i)
               id = `${match[1]}&${match[2].split(/[?/]/)[0]}`
             }
-            console.log(id)
             body = body.replace(link, `~~~~~~.^.~~~:twitter:${id}:~~~~~~.^.~~~`)
           }else if(link.match(mobileTwitterXRegex)) {
             match = link.match(mobileTwitterXRegex)

src/components/modals/AddToPocketModal/index.js

@@ -185,7 +185,7 @@ const useStyles = createUseStyles(theme => ({
 }))
 
 function AddToPocketModal(props) {
-  const { show, onHide, user, author, buzz } = props
+  const { show, onHide, author, buzz } = props
   const [selectedPocket, setSelectedPocket] = useState(null)
   const [loading, setLoading] = useState(false)
   const [pockets, setPockets] = useState([])

src/components/modals/CensorshipModal/index.js

@@ -116,42 +116,38 @@ const CensorhipModal = (props) => {
     loading,
     item,
     closeCensorshipDialog,
-    censorTypes = [],
+    // censorTypes = [], // Unused - may be needed for future features
     broadcastNotification,
   } = props
 
   const [open, setOpen] = useState(false)
   const [author, setAuthor] = useState(null)
   const [permlink, setPermlink] = useState(null)
-  const [typeId, setTypeId] = useState(0)
-  const [callback, setCallback] = useState(null)
   const classes = useStyles()
 
   useEffect(() => {
     if(item && item.hasOwnProperty('open')) {
-      const { open, author, permlink, callback } = item
-      setCallback(callback)
+      const { open, author, permlink } = item
       setOpen(open)
       setAuthor(author)
       setPermlink(permlink)
-      setTypeId(0)
     }
   }, [item])
 
   const handleClickCloseDialog = () => {
     closeCensorshipDialog()
   }
 
-  const handleChangeTypeId = (event) => {
-    setTypeId(event.target.value)
-  }
+  // Unused functions - censorship feature deprecated
+  // const handleChangeTypeId = (event) => {
+  //   setTypeId(event.target.value)
+  // }
 
-  const handleClickCensorBuzz = () => {
-    // Censorship API has been removed - feature no longer available
-    setOpen(false)
-    broadcastNotification('error', 'Censorship feature is no longer available')
-    setTypeId(0)
-  }
+  // const handleClickCensorBuzz = () => {
+  //   setOpen(false)
+  //   broadcastNotification('error', 'Censorship feature is no longer available')
+  //   setTypeId(0)
+  // }
 
 
   return (

src/components/modals/CreatePocketModal/index.js

@@ -158,7 +158,7 @@ const useStyles = createUseStyles(theme => ({
 }))
 
 function CreatePocketModal(props) {
-  const { show, onHide, user, loadPockets } = props
+  const { show, onHide, loadPockets } = props
   const [pocketName, setPocketName] = useState('')
   const [pocketSlug, setPocketSlug] = useState('')
   const [loading, setLoading] = useState(false)

src/components/modals/RemoveFromPocketConfirmModal/index.js

@@ -115,7 +115,7 @@ const useStyles = createUseStyles(theme => ({
 }))
 
 function RemoveFromPocketConfirmModal(props) {
-  const { show, onHide, user, pocket, buzz, loadPockets } = props
+  const { show, onHide, pocket, buzz, loadPockets } = props
   const classes = useStyles()
 
   const [fetching, setFetching] = useState(false)