RhythmX/patch_skeleton.py at main · CodeWithBasu/RhythmX · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import re

with open('components/music-visualizer.tsx', 'r', encoding='utf-8') as f:
    content = f.read()

target = r"""          \{/\* Skeleton Loading Rows \*/\}
            \{isLoadingSongs && \(
              <>
                <section>
                  <div className="h-6 w-48 bg-white/10 rounded mb-4 animate-pulse" />
                  <div className="flex overflow-x-hidden gap-4 pb-4 -mx-4 px-4">
                    \{\[\.\.\.Array\(6\)\].map\(\(_, i\) => \(
                      <div key=\{`hits-skel-\$\{i\}`} className="shrink-0 w-\[120px\] sm:w-\[160px\] animate-pulse">
                        <div className="w-\[120px\] sm:w-\[160px\] h-\[120px\] sm:h-\[160px\] mb-3 bg-white/10 rounded-md" />
                        <div className="h-3 bg-white/10 rounded w-3/4 mb-2" />
                        <div className="h-2 bg-white/10 rounded w-1/2" />
                      </div>
                    \)\)}
                  </div>
                </section>
                <section className="mt-8">
                  <div className="h-6 w-32 bg-white/10 rounded mb-4 animate-pulse" />
                  <div className="flex overflow-x-hidden gap-4 pb-4 -mx-4 px-4">
                    \{\[\.\.\.Array\(6\)\].map\(\(_, i\) => \(
                      <div key=\{`chill-skel-\$\{i\}`} className="shrink-0 w-\[120px\] sm:w-\[160px\] animate-pulse">
                        <div className="w-\[120px\] sm:w-\[160px\] h-\[120px\] sm:h-\[160px\] mb-3 bg-white/10 rounded-md" />
                        <div className="h-3 bg-white/10 rounded w-2/3 mb-2" />
                        <div className="h-2 bg-white/10 rounded w-1/3" />
                      </div>
                    \)\)}
                  </div>
                </section>
              </>
            \)}"""

replacement = """          {/* Skeleton Loading Rows */}
            {isLoadingSongs && (
              <>
                <section className="px-6 mt-4 animate-pulse">
                  <div className="flex items-center justify-between mb-4">
                    <div className="h-5 w-32 bg-white/10 rounded-full" />
                    <div className="h-3 w-12 bg-white/10 rounded-full" />
                  </div>
                  <div className="flex flex-col gap-3">
                    {[...Array(5)].map((_, i) => (
                      <div key={`hits-skel-${i}`} className="flex items-center gap-4 p-2 bg-white/[0.05] border border-white/5 rounded-[24px]">
                        <div className="w-12 h-12 shrink-0 rounded-full bg-white/10" />
                        <div className="flex-1 min-w-0">
                          <div className="h-3.5 bg-white/10 rounded-full w-2/3 mb-2" />
                          <div className="h-2.5 bg-white/10 rounded-full w-1/3" />
                        </div>
                        <div className="w-8 h-8 mr-2 rounded-full bg-white/10 shrink-0" />
                      </div>
                    ))}
                  </div>
                </section>
                <section className="px-6 mt-8 animate-pulse">
                  <div className="flex items-center justify-between mb-4">
                    <div className="h-5 w-32 bg-white/10 rounded-full" />
                    <div className="h-3 w-12 bg-white/10 rounded-full" />
                  </div>
                  <div className="flex flex-col gap-3">
                    {[...Array(5)].map((_, i) => (
                      <div key={`chill-skel-${i}`} className="flex items-center gap-4 p-2 bg-white/[0.05] border border-white/5 rounded-[24px]">
                        <div className="w-12 h-12 shrink-0 rounded-full bg-white/10" />
                        <div className="flex-1 min-w-0">
                          <div className="h-3.5 bg-white/10 rounded-full w-2/3 mb-2" />
                          <div className="h-2.5 bg-white/10 rounded-full w-1/3" />
                        </div>
                        <div className="w-8 h-8 mr-2 rounded-full bg-white/10 shrink-0" />
                      </div>
                    ))}
                  </div>
                </section>
              </>
            )}"""

content = re.sub(target, replacement, content, flags=re.DOTALL)

with open('components/music-visualizer.tsx', 'w', encoding='utf-8') as f:
    f.write(content)

print("Applied vertical skeleton loader")