( text: string, glimmerIndex: number, )
| 77 | * these segments. |
| 78 | */ |
| 79 | export function computeShimmerSegments( |
| 80 | text: string, |
| 81 | glimmerIndex: number, |
| 82 | ): { before: string; shimmer: string; after: string } { |
| 83 | const messageWidth = stringWidth(text) |
| 84 | const shimmerStart = glimmerIndex - 1 |
| 85 | const shimmerEnd = glimmerIndex + 1 |
| 86 | |
| 87 | // When shimmer is offscreen, return all text as "before" |
| 88 | if (shimmerStart >= messageWidth || shimmerEnd < 0) { |
| 89 | return { before: text, shimmer: '', after: '' } |
| 90 | } |
| 91 | |
| 92 | // Split into at most 3 segments by visual column position |
| 93 | const clampedStart = Math.max(0, shimmerStart) |
| 94 | let colPos = 0 |
| 95 | let before = '' |
| 96 | let shimmer = '' |
| 97 | let after = '' |
| 98 | for (const { segment } of getGraphemeSegmenter().segment(text)) { |
| 99 | const segWidth = stringWidth(segment) |
| 100 | if (colPos + segWidth <= clampedStart) { |
| 101 | before += segment |
| 102 | } else if (colPos > shimmerEnd) { |
| 103 | after += segment |
| 104 | } else { |
| 105 | shimmer += segment |
| 106 | } |
| 107 | colPos += segWidth |
| 108 | } |
| 109 | |
| 110 | return { before, shimmer, after } |
| 111 | } |
| 112 | |
| 113 | /** Computed bridge status label and color from connection state. */ |
| 114 | export type BridgeStatusInfo = { |
no test coverage detected