https://pressthink.org/j/rosen-archive/frontend/components/LoadingQuotes.js?v=3.8.36

1// LoadingQuotes.js - Rotating dissertation quotes during loading
2import { useState, useEffect } from 'react';
3import { html } from '../html.js?v=3.8.36';
4import { BookOpen } from 'lucide-react';
5
6// Curated quotes from the dissertation for the loading screen
7const LOADING_QUOTES = [
8  {
9    quote: 'Journalism is not an activity conducted solely by journalists; or, to put it another way, journalism is communication and communication is something that takes place between people. It is not an action but a transaction.',
10    source: 'Introduction'
11  },
12  {
13    quote: 'Information is not really "in" the items which come over the wire and make their way into the newspaper. It is "in" the relations between people and a changing environment.',
14    source: 'Chapter 2'
15  },
16  {
17    quote: 'For any press anywhere, making things public does not a public make.',
18    source: 'Conclusion'
19  },
20  {
21    quote: 'Presenting "all the news" is therefore an impossible goal, and the press that avows it can only be an impossible press.',
22    source: 'Conclusion'
23  },
24  {
25    quote: 'Our system of communication is not addressed at the public but at private individuals. We have evolved a radical form of mobilized privacy.',
26    source: 'Chapter 5'
27  },
28  {
29    quote: 'The press is like the beam of a searchlight that moves restlessly about, bringing one episode and then another out of darkness into vision.',
30    source: 'Chapter 7'
31  },
32  {
33    quote: 'Seeds are sown not by being thrown out at random, but by being so distributed as to take root and have a chance of growth.',
34    source: 'Chapter 8'
35  },
36  {
37    quote: 'The same conditions which make citizens dependent on the press for information have other consequences as well.',
38    source: 'Chapter 6'
39  },
40  {
41    quote: 'Sensationalism is not a perverse appetite for the crude and spectacular, but the increasing difficulty of interesting a population which does not act on its world.',
42    source: 'Chapter 2'
43  }
44];
45
46const ROTATION_INTERVAL = 4000; // 4 seconds per quote
47
48const LoadingQuotes = () => {
49  const [currentIndex, setCurrentIndex] = useState(() =>
50    Math.floor(Math.random() * LOADING_QUOTES.length)
51  );
52  const [isVisible, setIsVisible] = useState(true);
53
54  useEffect(() => {
55    const interval = setInterval(() => {
56      // Fade out
57      setIsVisible(false);
58
59      // After fade out, change quote and fade in
60      setTimeout(() => {
61        setCurrentIndex(prev => (prev + 1) % LOADING_QUOTES.length);
62        setIsVisible(true);
63      }, 300);
64    }, ROTATION_INTERVAL);
65
66    return () => clearInterval(interval);
67  }, []);
68
69  const current = LOADING_QUOTES[currentIndex];
70
71  return html`
72    <div className="archive-loading-state">
73      <div className="archive-loading-state__mark" aria-hidden="true">
74        <div>
75          <${BookOpen} />
76        </div>
77        <span />
78      </div>
79
80      <div
81        className="archive-loading-state__quote"
82        aria-hidden="true"
83        style=${{ opacity: isVisible ? 1 : 0 }}
84      >
85        <blockquote>
86          "${current.quote}"
87        </blockquote>
88        <cite>
89          — The Impossible Press, ${current.source}
90        </cite>
91      </div>
92
93      <p className="archive-loading-state__status" role="status" aria-live="polite" aria-atomic="true">
94        Loading archive...
95      </p>
96      <p className="archive-loading-state__tip">
97        Tip: Records are cached for faster loading next time
98      </p>
99    </div>
100  `;
101};
102
103export default LoadingQuotes;