Skip to content

Commit defa0fa

Browse files
pull[bot]pull[bot]
committed
[DevTools] Use Visually Lighter Skeletons (facebook#34185)
The skeletons right now are too jarring because they're visually heavier than the content that comes in later. This makes them draw attention to themselves as flashing things. A good skeleton and loading indicator should ideally start as invisible as possible and then gradually become more visible the longer time passes so that if it loads quickly then it was never much visible at all. Even at its max it should never be heavier weight than the final content so that it visually reverts into lesser. Another rule of thumb is that it should be as close as possible to the final content in size but if it's unknown it should always be smaller than the final content so that the content grows into its slot rather than the slot contracting. This makes the skeleton fade from invisible into the dimmest color just as a subtle hint that something is still loading. I also added a missing skeleton since the stack traces in rendered by can now suspend while source mapping. The other tweak I did is use disabled buttons in all the cases where we load the ability to enable a button. This is more subtle and if you hover over you can see why it's still disabled. Rather than flashing the button each time you change element. DiffTrain build for [14c50e3](facebook@14c50e3)
1 parent f7ce1b5 commit defa0fa

38 files changed

+6562
-6626
lines changed

‎compiled/facebook-www/JSXDEVRuntime-dev.classic.js‎

Lines changed: 5 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -156,25 +156,16 @@ __DEV__ &&
156156
componentName = this.props.ref;
157157
return void 0 !== componentName ? componentName : null;
158158
}
159-
function ReactElement(
160-
type,
161-
key,
162-
self,
163-
source,
164-
owner,
165-
props,
166-
debugStack,
167-
debugTask
168-
) {
169-
self = props.ref;
159+
function ReactElement(type, key, props, owner, debugStack, debugTask) {
160+
var refProp = props.ref;
170161
type = {
171162
$$typeof: REACT_ELEMENT_TYPE,
172163
type: type,
173164
key: key,
174165
props: props,
175166
_owner: owner
176167
};
177-
null !== (void 0 !== self ? self : null)
168+
null !== (void 0 !== refProp ? refProp : null)
178169
? Object.defineProperty(type, "ref", {
179170
enumerable: !1,
180171
get: elementRefGetterWithDeprecationWarning
@@ -213,8 +204,6 @@ __DEV__ &&
213204
config,
214205
maybeKey,
215206
isStaticChildren,
216-
source,
217-
self,
218207
debugStack,
219208
debugTask
220209
) {
@@ -275,10 +264,8 @@ __DEV__ &&
275264
return ReactElement(
276265
type,
277266
children,
278-
self,
279-
source,
280-
getOwner(),
281267
maybeKey,
268+
getOwner(),
282269
debugStack,
283270
debugTask
284271
);
@@ -337,23 +324,14 @@ __DEV__ &&
337324
var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
338325
var didWarnAboutKeySpread = {};
339326
exports.Fragment = REACT_FRAGMENT_TYPE;
340-
exports.jsxDEV = function (
341-
type,
342-
config,
343-
maybeKey,
344-
isStaticChildren,
345-
source,
346-
self
347-
) {
327+
exports.jsxDEV = function (type, config, maybeKey, isStaticChildren) {
348328
var trackActualOwner =
349329
1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
350330
return jsxDEVImpl(
351331
type,
352332
config,
353333
maybeKey,
354334
isStaticChildren,
355-
source,
356-
self,
357335
trackActualOwner
358336
? Error("react-stack-top-frame")
359337
: unknownOwnerDebugStack,

‎compiled/facebook-www/JSXDEVRuntime-dev.modern.js‎

Lines changed: 5 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -156,25 +156,16 @@ __DEV__ &&
156156
componentName = this.props.ref;
157157
return void 0 !== componentName ? componentName : null;
158158
}
159-
function ReactElement(
160-
type,
161-
key,
162-
self,
163-
source,
164-
owner,
165-
props,
166-
debugStack,
167-
debugTask
168-
) {
169-
self = props.ref;
159+
function ReactElement(type, key, props, owner, debugStack, debugTask) {
160+
var refProp = props.ref;
170161
type = {
171162
$$typeof: REACT_ELEMENT_TYPE,
172163
type: type,
173164
key: key,
174165
props: props,
175166
_owner: owner
176167
};
177-
null !== (void 0 !== self ? self : null)
168+
null !== (void 0 !== refProp ? refProp : null)
178169
? Object.defineProperty(type, "ref", {
179170
enumerable: !1,
180171
get: elementRefGetterWithDeprecationWarning
@@ -213,8 +204,6 @@ __DEV__ &&
213204
config,
214205
maybeKey,
215206
isStaticChildren,
216-
source,
217-
self,
218207
debugStack,
219208
debugTask
220209
) {
@@ -275,10 +264,8 @@ __DEV__ &&
275264
return ReactElement(
276265
type,
277266
children,
278-
self,
279-
source,
280-
getOwner(),
281267
maybeKey,
268+
getOwner(),
282269
debugStack,
283270
debugTask
284271
);
@@ -337,23 +324,14 @@ __DEV__ &&
337324
var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
338325
var didWarnAboutKeySpread = {};
339326
exports.Fragment = REACT_FRAGMENT_TYPE;
340-
exports.jsxDEV = function (
341-
type,
342-
config,
343-
maybeKey,
344-
isStaticChildren,
345-
source,
346-
self
347-
) {
327+
exports.jsxDEV = function (type, config, maybeKey, isStaticChildren) {
348328
var trackActualOwner =
349329
1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
350330
return jsxDEVImpl(
351331
type,
352332
config,
353333
maybeKey,
354334
isStaticChildren,
355-
source,
356-
self,
357335
trackActualOwner
358336
? Error("react-stack-top-frame")
359337
: unknownOwnerDebugStack,

‎compiled/facebook-www/REVISION‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
cf6e502ed23ab3357e58965789324ddfa0e12821
1+
14c50e344c2f639a9e08cc03b16cc7fc6c1d194a

‎compiled/facebook-www/REVISION_TRANSFORMS‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
cf6e502ed23ab3357e58965789324ddfa0e12821
1+
14c50e344c2f639a9e08cc03b16cc7fc6c1d194a

‎compiled/facebook-www/React-dev.classic.js‎

Lines changed: 24 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -203,25 +203,16 @@ __DEV__ &&
203203
componentName = this.props.ref;
204204
return void 0 !== componentName ? componentName : null;
205205
}
206-
function ReactElement(
207-
type,
208-
key,
209-
self,
210-
source,
211-
owner,
212-
props,
213-
debugStack,
214-
debugTask
215-
) {
216-
self = props.ref;
206+
function ReactElement(type, key, props, owner, debugStack, debugTask) {
207+
var refProp = props.ref;
217208
type = {
218209
$$typeof: REACT_ELEMENT_TYPE,
219210
type: type,
220211
key: key,
221212
props: props,
222213
_owner: owner
223214
};
224-
null !== (void 0 !== self ? self : null)
215+
null !== (void 0 !== refProp ? refProp : null)
225216
? Object.defineProperty(type, "ref", {
226217
enumerable: !1,
227218
get: elementRefGetterWithDeprecationWarning
@@ -260,8 +251,6 @@ __DEV__ &&
260251
config,
261252
maybeKey,
262253
isStaticChildren,
263-
source,
264-
self,
265254
debugStack,
266255
debugTask
267256
) {
@@ -322,10 +311,8 @@ __DEV__ &&
322311
return ReactElement(
323312
type,
324313
children,
325-
self,
326-
source,
327-
getOwner(),
328314
maybeKey,
315+
getOwner(),
329316
debugStack,
330317
debugTask
331318
);
@@ -334,10 +321,8 @@ __DEV__ &&
334321
newKey = ReactElement(
335322
oldElement.type,
336323
newKey,
337-
void 0,
338-
void 0,
339-
oldElement._owner,
340324
oldElement.props,
325+
oldElement._owner,
341326
oldElement._debugStack,
342327
oldElement._debugTask
343328
);
@@ -542,20 +527,27 @@ __DEV__ &&
542527
}
543528
function lazyInitializer(payload) {
544529
if (-1 === payload._status) {
545-
var ctor = payload._result;
546-
ctor = ctor();
547-
ctor.then(
530+
var ctor = payload._result,
531+
thenable = ctor();
532+
thenable.then(
548533
function (moduleObject) {
549-
if (0 === payload._status || -1 === payload._status)
550-
(payload._status = 1), (payload._result = moduleObject);
534+
if (0 === payload._status || -1 === payload._status) {
535+
payload._status = 1;
536+
payload._result = moduleObject;
537+
var _ioInfo = payload._ioInfo;
538+
null != _ioInfo && (_ioInfo.end = performance.now());
539+
void 0 === thenable.status &&
540+
((thenable.status = "fulfilled"),
541+
(thenable.value = moduleObject));
542+
}
551543
},
552544
function (error) {
553545
if (0 === payload._status || -1 === payload._status)
554546
(payload._status = 2), (payload._result = error);
555547
}
556548
);
557549
-1 === payload._status &&
558-
((payload._status = 0), (payload._result = ctor));
550+
((payload._status = 0), (payload._result = thenable));
559551
}
560552
if (1 === payload._status)
561553
return (
@@ -1109,10 +1101,8 @@ __DEV__ &&
11091101
props = ReactElement(
11101102
element.type,
11111103
key,
1112-
void 0,
1113-
void 0,
1114-
owner,
11151104
props,
1105+
owner,
11161106
element._debugStack,
11171107
element._debugTask
11181108
);
@@ -1185,10 +1175,8 @@ __DEV__ &&
11851175
return ReactElement(
11861176
type,
11871177
key,
1188-
void 0,
1189-
void 0,
1190-
getOwner(),
11911178
i,
1179+
getOwner(),
11921180
propName ? Error("react-stack-top-frame") : unknownOwnerDebugStack,
11931181
propName ? createTask(getTaskName(type)) : unknownOwnerDebugTask
11941182
);
@@ -1243,55 +1231,42 @@ __DEV__ &&
12431231
return elementType;
12441232
};
12451233
exports.isValidElement = isValidElement;
1246-
exports.jsx = function (type, config, maybeKey, source, self) {
1234+
exports.jsx = function (type, config, maybeKey) {
12471235
var trackActualOwner =
12481236
1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
12491237
return jsxDEVImpl(
12501238
type,
12511239
config,
12521240
maybeKey,
12531241
!1,
1254-
source,
1255-
self,
12561242
trackActualOwner
12571243
? Error("react-stack-top-frame")
12581244
: unknownOwnerDebugStack,
12591245
trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
12601246
);
12611247
};
1262-
exports.jsxDEV = function (
1263-
type,
1264-
config,
1265-
maybeKey,
1266-
isStaticChildren,
1267-
source,
1268-
self
1269-
) {
1248+
exports.jsxDEV = function (type, config, maybeKey, isStaticChildren) {
12701249
var trackActualOwner =
12711250
1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
12721251
return jsxDEVImpl(
12731252
type,
12741253
config,
12751254
maybeKey,
12761255
isStaticChildren,
1277-
source,
1278-
self,
12791256
trackActualOwner
12801257
? Error("react-stack-top-frame")
12811258
: unknownOwnerDebugStack,
12821259
trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
12831260
);
12841261
};
1285-
exports.jsxs = function (type, config, maybeKey, source, self) {
1262+
exports.jsxs = function (type, config, maybeKey) {
12861263
var trackActualOwner =
12871264
1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
12881265
return jsxDEVImpl(
12891266
type,
12901267
config,
12911268
maybeKey,
12921269
!0,
1293-
source,
1294-
self,
12951270
trackActualOwner
12961271
? Error("react-stack-top-frame")
12971272
: unknownOwnerDebugStack,
@@ -1434,7 +1409,7 @@ __DEV__ &&
14341409
exports.useTransition = function () {
14351410
return resolveDispatcher().useTransition();
14361411
};
1437-
exports.version = "19.2.0-www-classic-cf6e502e-20250809";
1412+
exports.version = "19.2.0-www-classic-14c50e34-20250812";
14381413
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
14391414
"function" ===
14401415
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

0 commit comments

Comments
 (0)