TUI for Todoist written with React+Ink.
add better loading icon
Aly Raffauf
(Feb 14, 2026, 10:11 PM EST)
25d0e5fa
59a402b8
+40
-11
+30
-10
package-lock.json
+30
-10
package-lock.json
···
13
13
"@folder/xdg": "^4.0.1",
14
14
"ink": "^6.7.0",
15
15
"ink-link": "^5.0.0",
16
+
"ink-spinner": "^5.0.0",
16
17
"ink-text-input": "^6.0.0",
17
18
"meow": "^11.0.0",
18
19
"react": "^19.2.4"
···
1624
1625
},
1625
1626
"engines": {
1626
1627
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
1628
+
},
1629
+
"funding": {
1630
+
"url": "https://github.com/sponsors/sindresorhus"
1631
+
}
1632
+
},
1633
+
"node_modules/cli-spinners": {
1634
+
"version": "2.9.2",
1635
+
"resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz",
1636
+
"integrity": "sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==",
1637
+
"license": "MIT",
1638
+
"engines": {
1639
+
"node": ">=6"
1627
1640
},
1628
1641
"funding": {
1629
1642
"url": "https://github.com/sponsors/sindresorhus"
···
4679
4692
},
4680
4693
"peerDependencies": {
4681
4694
"ink": ">=6"
4695
+
}
4696
+
},
4697
+
"node_modules/ink-spinner": {
4698
+
"version": "5.0.0",
4699
+
"resolved": "https://registry.npmjs.org/ink-spinner/-/ink-spinner-5.0.0.tgz",
4700
+
"integrity": "sha512-EYEasbEjkqLGyPOUc8hBJZNuC5GvXGMLu0w5gdTNskPc7Izc5vO3tdQEYnzvshucyGCBXc86ig0ujXPMWaQCdA==",
4701
+
"license": "MIT",
4702
+
"dependencies": {
4703
+
"cli-spinners": "^2.7.0"
4704
+
},
4705
+
"engines": {
4706
+
"node": ">=14.16"
4707
+
},
4708
+
"peerDependencies": {
4709
+
"ink": ">=4.0.0",
4710
+
"react": ">=18.0.0"
4682
4711
}
4683
4712
},
4684
4713
"node_modules/ink-testing-library": {
···
9977
10006
}
9978
10007
},
9979
10008
"node_modules/xo/node_modules/typescript": {
9980
-
"version": "4.9.5",
9981
10009
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
9982
10010
"integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
9983
10011
"dev": true,
9984
-
"inBundle": true,
9985
-
"license": "Apache-2.0",
9986
-
"bin": {
9987
-
"tsc": "bin/tsc",
9988
-
"tsserver": "bin/tsserver"
9989
-
},
9990
-
"engines": {
9991
-
"node": ">=4.2.0"
9992
-
}
10012
+
"inBundle": true
9993
10013
},
9994
10014
"node_modules/xo/node_modules/yallist": {
9995
10015
"version": "4.0.0",
+1
package.json
+1
package.json
+9
-1
source/app.tsx
+9
-1
source/app.tsx
···
1
1
import React, {useState, useEffect, useCallback} from 'react';
2
2
import {Box, Text, useApp} from 'ink';
3
+
import Spinner from 'ink-spinner';
3
4
import TextInput from 'ink-text-input';
4
5
import {TodoistApi, type Task} from '@doist/todoist-api-typescript';
5
6
import {type View, commands} from './commands.js';
···
145
146
};
146
147
147
148
if (loading) {
148
-
return <Text>Loading tasks...</Text>;
149
+
return (
150
+
<Text>
151
+
<Text color="cyan">
152
+
<Spinner type="dots" />
153
+
</Text>{' '}
154
+
Loading
155
+
</Text>
156
+
);
149
157
}
150
158
151
159
const viewLabel =